jQuery创建滑动幻灯片
作者:admin 时间:2021-7-27 22:50:33 浏览:在本教程中，我将使用简单的 HTML 和 CSS 来创建幻灯片，其中将使用 jQuery 库创建滑动功能。我还将使用两个流行的插件，即：LocalScroll 和 ScrollTo，用于在 javasrcipt 幻灯片中提供底层效果。虽然前一个插件允许锚点根据目标 ID 将幻灯片跳转到准确的幻灯片，但后一个插件提供了出色的滑动功能，可以转换幻灯片而不是简单地从一个跳转到另一个。
jQuery创建滑动幻灯片
下面是幻灯片的 HTML 结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Sliding</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/custom-scripts.js"></script>
</head>
<body>
<div id="slideshow">
<!-- List of slider images -->
<ul>
<li id="slide1"><img src="images/slide1.jpg" alt="Slide 1" /></li>
<li id="slide2"><img src="images/slide2.jpg" alt="Slide 2" /></li>
<li id="slide3"><img src="images/slide3.jpg" alt="Slide 3" /></li>
<li id="slide4"><img src="images/slide4.jpg" alt="Slide 4" /></li>
<li id="slide5"><img src="images/slide5.jpg" alt="Slide 5" /></li>
</ul>
</div>
<div id="slideshow-nav">
<!-- Navigation list of slider images -->
<ul>
<li><a href="#slide1">Slide 1</a></li>
<li><a href="#slide2">Slide 2</a></li>
<li><a href="#slide3">Slide 3</a></li>
<li><a href="#slide4">Slide 4</a></li>
<li><a href="#slide5">Slide 5</a></li>
</ul>
</div>
</body>
</html>
仔细观察上面的代码，你会发现演示页面的 HTML 以 Doctype、标题和指向 CSS 样式表的链接开头。在此之后，两个插件（上面已经解释过）、jQuery 库和空的 scripts.js 文件可以链接在一起，以使幻灯片放映和工作。
形成幻灯片的 HTML 已分为两部分，即：一个带有幻灯片 ID 的 div 和另一个带有幻灯片导航 ID 的 div。在这里，重要的是要注意幻灯片 div 将包含一个链接图像的无序列表，带有与幻灯片导航锚点对应的 ID 的 <li> 标签。
现在，让我们来看看 CSS 样式（css/style.css）：
#slideshow {/*slider container css*/
width: 800px;
height: 400px;
overflow: hidden;
margin: 50px auto 50px auto;
box-shadow: 0px 0px 50px #333;
-moz-box-shadow: 0px 0px 50px #333;
-webkit-box-shadow: 0px 0px 50px #333;
}
#slideshow ul {/*manage slider scroll elements css*/
width: 4000px;
list-style: none;
}
#slideshow ul li {
float: left;
}上面的 CSS 将每个页面的样式设置为更像幻灯片。首先将幻灯片的高度和宽度设置为与图像幻灯片的尺寸完全相似的尺寸。每张幻灯片并排浮动，无序列表的总宽度缩放到 4590px。此外，我使用了溢出属性来防止多个图像在整个页面上运行。在这里，你只需将溢出属性设置为溢出：滚动；即使在缺少 Javascript 的情况下也能制作幻灯片。
接下来，使用 CSS3-box shadow 添加一个很酷的阴影，如下所示：
#slideshow-nav {/* Slider navigation container css */
width: 150px;
margin: 0 auto 100px auto;
}
#slideshow-nav ul {
list-style: none;
}
#slideshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {/* navigation styling css */
display: block;
width: 20px;
height: 20px;
float: left;
margin: 0 5px;
background: #fff;
text-indent: -9999px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
/* hover and active navigation css */
background: #333;
}在这里，如果你仔细观察，幻灯片导航 div 正在移动到主幻灯片部分下方的位置。此外，我们不希望多个按钮在启用 Javascript 的情况下不起作用。你可以使用visibility: hidden; 用于在默认情况下隐藏这些按钮，使它们在以后的时间点可见。你可能还想知道，在 CSS3 边框半径的帮助下，每个导航列表的锚点都被转换为圆形按钮，默认文本使用负文本缩进移出屏幕。
到目前为止，即使没有 Javascript，幻灯片在其工作状态下也是可见的。只有一个滚动条允许用户在多个图像之间来回移动。
最后，让我们看看jQuery的功能（js/custom-scripts.js）：
$(document).ready(function() {
var slider = $("#slideshow");
var slider_nav = $("#slideshow-nav");
slider_nav.find("a[href=#slide1]").addClass("active");
slider_nav.localScroll({
target:'#slideshow',
axis: 'x'
});
slider_nav.find("a").click(function(){
slider_nav.find("a").removeClass("active");
$(this).addClass("active");
});
});如果你查看上面的代码，你会发现幻灯片 div 的 CSS 已经从 overflow: scroll; 改成了overflow; hidden;。在此之后，导航按钮的可见性已设置为可见，并自动将“active”类添加到第一个按钮。两个插件，即：LocalScroll 和 ScrollTo 现在都被激活，localScroll 功能被应用于幻灯片导航项目，通过简单地沿 X 轴移动来引导它们定位幻灯片项目。
最后，为了确保幻灯片中的所有按钮都以其相关的active类（无论何时点击）亮起，我们将使用一个简单的 jQuery 规则，从不同的按钮中删除active类。这个特定的active类将出现在 CSS 样式表中，用于为相应的按钮呈现灰色背景。在浏览器中运行快速测试将显示以最佳方式工作的整个 javascript 幻灯片。
结论
这就是创建一个引人注目的 Javascript 幻灯片，它可以为你沉闷乏味的网页添加大量的视觉吸引力和优雅。
- 站长推荐
