欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用jquery制作的简单轮播图

程序员文章站 2022-06-12 13:22:52
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录。 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相应位置 首先书写的div部分 然后书写style样式部分 最后是script部分 然后出现上图样式, ......

  我也是进入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制作的简单轮播图

 

 

然后出现上图样式,最后因为是用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>