Jquery Slider是一种非常常用的图形交互元素。它能够轻松的将一个图片轮播展示出来,让网页看起来更加动态,吸引人眼球。使用Jquery Slider,我们可以让图片轮播自动播放或者手动播放,也可以设置图片切换的速度。
<!-- 引入Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 引入Jquery Slider插件 --> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <!-- 引入Jquery Slider插件的CSS文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
以上是引入Jquery Slider插件需要的基本代码。接着我们需要设置一下Jquery Slider的HTML结构
<ul class="slider"> <li><img src="slide1.jpg"></li> <li><img src="slide2.jpg"></li> <li><img src="slide3.jpg"></li> <li><img src="slide4.jpg"></li> </ul>
在这个HTML结构中,我们使用一个包含了图片的无序列表。在无序列表中的每个列表项中,我们都放置了一张图片。这就代表了我们要轮播展示的图片。
$(document).ready(function(){ $('.slider').bxSlider({ auto: true, // 自动轮播 speed: 500, // 切换图片的速度 pause: 2000 // 暂停的时间 }); });
在Jquery代码中,我们通过类名参数选择轮播容器,并设置自动轮播、图片切换速度和暂停时间等参数。这样,一个简单的Jquery Slider就完成了初始化工作,可以开始展示图片了。