用jquery制作的简单轮播图

来源：cnblogs　　作者：西西里嘻嘻　　时间：2019/9/10 10:54:22　　对本文有异议

　　我也是进入H5前端的小菜鸟一枚，最近才进入jquery的学习，所以打算对自己的学习进行记录。

　　今天分享的是一个简单的轮播图，这个轮播图的特效很简单，能够进行图片的轮播以及点击相应图片，图片能够跳转到相应位置

　　首先书写的div部分

 1 <div id="scrollPics">
 2     <ul class="slider">
 3         <li><img src="../images/1.jpg" alt=""></li>
 4         <li><img src="../images/2.jpg" alt=""></li>
 5         <li><img src="../images/3.jpg" alt=""></li>
 6         <li><img src="../images/7.jpg" alt=""></li>
 7         <li><img src="../images/5.jpg" alt=""></li>
 8     </ul>
 9     <ul class="num"></ul>
10 </div>

　　然后书写style样式部分

 1  <style>
 2         *{
 3             margin: 0px;
 4             padding: 0px;
 5         }
 6         ul{
 7             list-style: none;
 8         }
 9         #scrollPics{
10             height: 420px;
11             width: 790px;
12             margin-bottom: 10px;
13             overflow: hidden;
14             position: relative;
15             top: 100px;
16             left:400px;
17         }
18         .slider{
19         margin-top: 0px;
20         }
21         .slider img{
22         width: 100%;
23         }
24         .num{
25         position: absolute;
26         right: 5px;
27         bottom: 5px;
28         }
29         .num li{
30         float: left;
31         color: #ff7300;
32         text-align: center;
33         line-height: 16px;
34         width: 16px;
35         height: 16px;
36         cursor: pointer;
37         overflow: hidden;
38         margin: 3px 1px;
39         border: 1px solid #ff7300;
40         background-color: white;
41         border-radius: 50%;
42         }
43         .num li.active{
44         color: #fff;
45         line-height: 21px;
46         width: 21px;
47         height: 21px;
48         font-size: 16px;
49         margin: 0 1px;
50         border: 0;
51         background-color: #ff7300;
52         font-weight: bold;
53         border-radius: 50%;
54         cursor: pointer;
55         }
56     </style>

　　最后是script部分

 1 <script>
 2     $(function () {
 3         var slider =$("#scrollPics .slider");
 4         //获取图片
 5         var imgCon =$("#scrollPics .slider li");
 6         //除第一张其余的图片全部隐藏
 7         imgCon.not(imgCon.eq(0)).hide();
 8         //定义页码
 9         var num =$("#scrollPics .num")
10         //获取li标签的长度
11         //find()方法返回备选元素的后代元素
12         var len =slider.find("li").length;
13         var html_page ="";
14         index=0;
15         //添加页码
16         for (var i=0;i<len;i++){
17             if (i===0){
18                 html_page+="<li class='active'>"+(i+1)+"</li>"
19             }
20             else {
21                 html_page +="<li>"+(i+1)+"</li>"
22             }
23         }
24         //输出原点
25         num.html(html_page)
26         //显示索引对应的图片
27         function showPic(index) {
28             imgCon.eq(index).show().siblings("li").hide();
29             num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")
30         }
31         //原点点击事件
32         $(".num li").click(function () {
33             index=$(this).index()
34             showPic(index)
35         })
36         //图片轮播
37         $("#scrollPics").hover(function () {
38             clearInterval(window.timer)
39         },function () {
40             window.timer =setInterval(function () {
41                 showPic(index);
42                 index++;
43                 if (index ===len){
44                     index =0
45                 }
46             },2000)
47         }).trigger("mouseleave")//触发备选元素的指定事件
48 
49     })
50 
51 </script>

然后出现上图样式，最后因为是用jquery书写的代码，还要导入 <script src="../js/jquery-2.2.3.js"></script>

最后是完整代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>JQ轮播图</title>
  6     <script src="../js/jquery-2.2.3.js"></script>
  7     <style>
  8         *{
  9             margin: 0px;
 10             padding: 0px;
 11         }
 12         ul{
 13             list-style: none;
 14         }
 15         #scrollPics{
 16             height: 420px;
 17             width: 790px;
 18             margin-bottom: 10px;
 19             overflow: hidden;
 20             position: relative;
 21             top: 100px;
 22             left:400px;
 23         }
 24         .slider{
 25         margin-top: 0px;
 26         }
 27         .slider img{
 28         width: 100%;
 29         }
 30         .num{
 31         position: absolute;
 32         right: 5px;
 33         bottom: 5px;
 34         }
 35         .num li{
 36         float: left;
 37         color: #ff7300;
 38         text-align: center;
 39         line-height: 16px;
 40         width: 16px;
 41         height: 16px;
 42         cursor: pointer;
 43         overflow: hidden;
 44         margin: 3px 1px;
 45         border: 1px solid #ff7300;
 46         background-color: white;
 47         border-radius: 50%;
 48         }
 49         .num li.active{
 50         color: #fff;
 51         line-height: 21px;
 52         width: 21px;
 53         height: 21px;
 54         font-size: 16px;
 55         margin: 0 1px;
 56         border: 0;
 57         background-color: #ff7300;
 58         font-weight: bold;
 59         border-radius: 50%;
 60         cursor: pointer;
 61         }
 62     </style>
 63 </head>
 64 <body>
 65 
 66 <div id="scrollPics">
 67     <ul class="slider">
 68         <li><img src="../images/1.jpg" alt=""></li>
 69         <li><img src="../images/2.jpg" alt=""></li>
 70         <li><img src="../images/3.jpg" alt=""></li>
 71         <li><img src="../images/7.jpg" alt=""></li>
 72         <li><img src="../images/5.jpg" alt=""></li>
 73     </ul>
 74     <ul class="num"></ul>
 75 </div>
 76 <script>
 77     $(function () {
 78         var slider =$("#scrollPics .slider");
 79         //获取图片
 80         var imgCon =$("#scrollPics .slider li");
 81         //除第一张其余的图片全部隐藏
 82         imgCon.not(imgCon.eq(0)).hide();
 83         //定义页码
 84         var num =$("#scrollPics .num")
 85         //获取li标签的长度
 86         //find()方法返回备选元素的后代元素
 87         var len =slider.find("li").length;
 88         var html_page ="";
 89         index=0;
 90         //添加页码
 91         for (var i=0;i<len;i++){
 92             if (i===0){
 93                 html_page+="<li class='active'>"+(i+1)+"</li>"
 94             }
 95             else {
 96                 html_page +="<li>"+(i+1)+"</li>"
 97             }
 98         }
 99         //输出原点
100         num.html(html_page)
101         //显示索引对应的图片
102         function showPic(index) {
103             imgCon.eq(index).show().siblings("li").hide();
104             num.find("li").eq(index).addClass("active").siblings("li").removeClass("active")
105         }
106         //原点点击事件
107         $(".num li").click(function () {
108             index=$(this).index()
109             showPic(index)
110         })
111         //图片轮播
112         $("#scrollPics").hover(function () {
113             clearInterval(window.timer)
114         },function () {
115             window.timer =setInterval(function () {
116                 showPic(index);
117                 index++;
118                 if (index ===len){
119                     index =0
120                 }
121             },2000)
122         }).trigger("mouseleave")//触发备选元素的指定事件
123 
124     })
125 
126 </script>
127 </body>
128 </html>

原文链接：http://www.cnblogs.com/sqbm1769294925/p/11455083.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章