jq-demo-轮播图

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{margin: 0; padding: 0; border: none;}
  8             ul, li {list-style: none;}
  9             #box {
 10                  600px;
 11                 height: 300px;
 12                 margin: 100px auto;
 13                 overflow: hidden;
 14                 border: 10px solid blue;
 15                 position: relative;
 16             }
 17             #list1 {
 18                  3100px;
 19                 height: 300px;
 20                 position: absolute;
 21                 left: 0;
 22                 top: 0;
 23             }
 24             #list1 li, #list1 img {
 25                  600px;
 26                 height: 300px;
 27             }
 28             #list1 li {
 29                 float: left;
 30             }
 31             #list2  {
 32                  150px;
 33                 height: 20px;
 34                 position: absolute;
 35                 right: 30px;
 36                 bottom: 30px;
 37             }
 38             #list2 li {
 39                  18px;
 40                 height: 18px;
 41                 border: 1px solid black;
 42                 background: yellow;
 43                 text-align: center;
 44                 line-height: 18px;
 45                 margin-left: 5px;
 46                 float: left;
 47                 cursor: pointer;
 48             }
 49             
 50             #list2 li.active {
 51                 background: green;
 52             }
 53             
 54             #prev, #next {
 55                  50px;
 56                 height: 22px;
 57                 background: orange;
 58                 position: absolute;
 59                 top: 45%;
 60                 cursor: pointer;
 61             } 
 62             #prev {
 63                 left: 10px;
 64             }
 65             #next {
 66                 right: 10px;
 67             }
 68             
 69         </style>
 70         <script src="js/jquery-1.12.3.js"></script>
 71         <script>
 72             $(function(){
 73                 
 74                 //jq轮播图
 75                 var list1 = $("#list1");
 76                 var list2 = $("#list2");
 77                 var li1 = $("#list1 li");
 78                 var li2 = $("#list2 li");
 79                 
 80                 //复制第一张图到最后
 81                 li1.first().clone(true).appendTo(list1);
 82                 
 83                 //
 84                 var size = $("#list1 li").size();
 85                 list1.width(600*size);
 86                 
 87                 //开启定时器
 88                 var i = 0;
 89                 var timer = setInterval(function(){
 90                     i++;
 91                     move();
 92                 }, 2000);
 93                 
 94                 function move(){
 95                     //上一页
 96                     if (i < 0) {
 97                         list1.css("left", -600*(size-1));
 98                         i = size-2;
 99                     }
100                     //下一页
101                     if (i >= size){
102                         list1.css("left", 0);
103                         i = 1;
104                     }
105                     
106                     list1.stop().animate({left:-i*600}, 500);
107                     
108                     li2.eq(i).addClass("active").siblings().removeClass("active");
109                     if (i == size-1) {
110                         li2.eq(0).addClass("active").siblings().removeClass("active");
111                     }
112                 }
113                 
114                 //上一页
115                 $("#prev").click(function(){
116                     i--;
117                     move();
118                 })
119                 
120                 //下一页
121                 $("#next").click(function(){
122                     i++;
123                     move();
124                 })
125                 
126                 li2.mouseenter(function(){
127                     i = $(this).index();
128                     move();
129                 })
130                 
131                 $("#box").hover(function(){
132                     clearInterval(timer);
133                 }, 
134                 function(){
135                     timer = setInterval(function(){
136                         i++;
137                         move();
138                     }, 2000);
139                 })
140                 
141                 
142             })
143         </script>
144     </head>
145     <body>
146         <div id="box">
147             <ul id="list1">
148                 <li><img src="images/b1.jpg" /></li>
149                 <li><img src="images/b2.jpg" /></li>
150                 <li><img src="images/b3.jpg" /></li>
151                 <li><img src="images/b4.jpg" /></li>
152             </ul>
153             <ul id="list2">
154                 <li class="active">1</li>
155                 <li>2</li>
156                 <li>3</li>
157                 <li>4</li>
158             </ul>
159             <div id="prev">上一页</div>
160             <div id="next">下一页</div>
161         </div>
162     </body>
163 </html>

clone(true) 方法是复制一个元素及其所有事件， clone() 方法是复制一个元素，不包含其所有事件。

jq透明度轮播图

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             * {
  8                 margin: 0;
  9                 padding: 0;
 10                 border: none;
 11             }
 12             ul, li {
 13                 list-style: none;
 14             }
 15              #box {
 16                   600px;
 17                  height: 300px;
 18                  margin: 100px auto;
 19                  position: relative;
 20                  /*overflow: hidden;*/
 21                  border: 10px solid blue;
 22              }
 23             
 24             #list1 {
 25                  600px;
 26                 height: 300px;
 27                 position: absolute;
 28                 left: 0;
 29                 top: 0;
 30             }
 31             #list1 li, #list1 img {
 32                  600px;
 33                 height: 300px;
 34             }
 35             #list1 li {
 36                 position: absolute;
 37                 left: 0;
 38                 top: 0;
 39             }
 40             
 41             #list2 {
 42                  600px;
 43                 height: 30px;
 44                 position: absolute;
 45                 left: 10%;
 46                 bottom: -60px;
 47             }
 48             #list2 li, #list2 img {
 49                  120px;
 50                 height: 60px;
 51                 float: left;
 52                 border: 1px solid red;
 53                 margin-right: 5px;
 54                 cursor: pointer;
 55             }
 56             
 57             #list2 li {
 58                 opacity: 0.3;
 59             }
 60             #list2 .active {
 61                 /*background: green;*/
 62                 opacity: 1;
 63             }
 64             
 65         </style>
 66         
 67         <script src="js/jquery-1.12.3.js"></script>
 68         <script>
 69             $(function(){
 70                 
 71                 var _ul1 = $("#list1");
 72                 var _ul2 = $("#list2");
 73                 var _li1 = $("#list1 li");
 74                 var _li2 = $("#list2 li");
 75                 
 76                 //初始化显示第一张图
 77                 _li1.eq(0).show().siblings().hide();
 78                 
 79                 //图片总数量
 80                 var size = $("#list1 li").size(); //4
 81                 
 82                 //自动轮播
 83                 var i = 0; //记录图片下标
 84                 var timer = setInterval(function(){
 85                     i++;
 86                     move(); 
 87                 }, 2000);
 88                 
 89                 //移动的函数
 90                 function move(){
 91                     
 92                     //如果i超出了图片总数量
 93                     if (i == size) {
 94                         i = 0; //即将移动到2张图
 95                     }
 96                     
 97                     //透明度切换到第i张图
 98                     _li1.eq(i).stop().fadeIn().siblings().stop().fadeOut();
 99                     
100                     //改变ul2的按钮状态
101                     _li2.eq(i).removeClass().addClass("active").siblings().removeClass("active"); 
102                     
103                 }
104                                 
105                 
106                 //li2上面的按钮
107                 _li2.hover(function(){
108                     var index = $(this).index();
109                     //console.log(index);
110                     i = index;
111                     move();
112                 })
113                 
114                 //移入box, 移出box
115                 $("#box").hover(function(){
116                     //移入, 关闭定时器
117                     clearInterval(timer);
118                 }, 
119                 function(){
120                     //移出, 重新开启定时器
121                     timer = setInterval(function(){
122                         i++;
123                         move();
124                     }, 2000);
125                 })
126                 
127                 
128             })
129         </script>
130         
131     </head>
132     <body>
133         <div id="box">
134             <ul id="list1">
135                 <li><img src="images/b1.jpg" /></li>
136                 <li><img src="images/b2.jpg" /></li>
137                 <li><img src="images/b3.jpg" /></li>
138                 <li><img src="images/b4.jpg" /></li>
139             </ul>
140             <ul id="list2">
141                 <li class="active"><img src="images/b1.jpg" /></li>
142                 <li><img src="images/b2.jpg" /></li>
143                 <li><img src="images/b3.jpg" /></li>
144                 <li><img src="images/b4.jpg" /></li>
145             </ul>
146             
147         </div>
148         
149     </body>
150 </html>

ajax 获取数据的轮播图

lunbo.json

 1 [
 2     {
 3         "id": 101,
 4         "img": "images/b1.jpg"
 5     },
 6     {
 7         "id": 102,
 8         "img": "images/b2.jpg"
 9     },
10     {
11         "id": 103,
12         "img": "images/b3.jpg"
13     }
14     
15 ]

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{margin: 0; padding: 0; border: none;}
  8             ul, li {list-style: none;}
  9             #box {
 10                  600px;
 11                 height: 300px;
 12                 margin: 100px auto;
 13                 overflow: hidden;
 14                 border: 10px solid blue;
 15                 position: relative;
 16             }
 17             #list1 {
 18                  3100px;
 19                 height: 300px;
 20                 position: absolute;
 21                 left: 0;
 22                 top: 0;
 23             }
 24             #list1 li, #list1 img {
 25                  600px;
 26                 height: 300px;
 27             }
 28             #list1 li {
 29                 float: left;
 30             }
 31             #list2  {
 32                  150px;
 33                 height: 20px;
 34                 position: absolute;
 35                 right: 30px;
 36                 bottom: 30px;
 37             }
 38             #list2 li {
 39                  18px;
 40                 height: 18px;
 41                 border: 1px solid black;
 42                 background: yellow;
 43                 text-align: center;
 44                 line-height: 18px;
 45                 margin-left: 5px;
 46                 float: left;
 47                 cursor: pointer;
 48             }
 49             
 50             #list2 li.active {
 51                 background: green;
 52             }
 53             
 54             #prev, #next {
 55                  50px;
 56                 height: 22px;
 57                 background: orange;
 58                 position: absolute;
 59                 top: 45%;
 60                 cursor: pointer;
 61             } 
 62             #prev {
 63                 left: 10px;
 64             }
 65             #next {
 66                 right: 10px;
 67             }
 68             
 69         </style>
 70         <script src="js/jquery-1.12.3.js"></script>
 71         <script>
 72             $(function(){
 73                 
 74                 //通过Ajax获取数据
 75                 $.get("json/lunbo.json", function(data){
 76                     //console.log(data); 
 77                     var arr = data;
 78                     
 79                     //遍历数组arr
 80                     for (var i=0; i<arr.length; i++) {
 81                         var obj = arr[i]; //每个图片的数据
 82                         
 83                         //创建li节点
 84                         $("<li><img src="+ obj.img +" /></li>").appendTo("#list1");  
 85                         if (i == 0){
 86                             $("<li class='active'>"+ (i+1) +"</li>").appendTo("#list2");
 87                         }
 88                         else {
 89                             $("<li>"+ (i+1) +"</li>").appendTo("#list2");
 90                         }
 91                     } 
 92                     
 93                     //lunbo
 94                     lunbo();
 95                     
 96                 })
 97                 
 98                 //jq轮播图
 99                 function lunbo(){
100                     var list1 = $("#list1");
101                     var list2 = $("#list2");
102                     var li1 = $("#list1 li");
103                     var li2 = $("#list2 li");
104                     
105                     //复制第一张图到最后
106                     li1.first().clone(true).appendTo(list1);
107                     
108                     //
109                     var size = $("#list1 li").size();
110                     list1.width(600*size);
111                     
112                     //开启定时器
113                     var i = 0;
114                     var timer = setInterval(function(){
115                         i++;
116                         move();
117                     }, 2000);
118                     
119                     function move(){
120                         
121                         if (i < 0) {
122                             list1.css("left", -600*(size-1));
123                             i = size-2;
124                         }
125                         
126                         if (i >= size){
127                             list1.css("left", 0);
128                             i = 1;
129                         }
130                         
131                         list1.stop().animate({left:-i*600}, 500);
132                         
133                         li2.eq(i).addClass("active").siblings().removeClass("active");
134                         if (i == size-1) {
135                             li2.eq(0).addClass("active").siblings().removeClass("active");
136                         }
137                     }
138                     
139                     //上一页
140                     $("#prev").click(function(){
141                         i--;
142                         move();
143                     })
144                     
145                     //下一页
146                     $("#next").click(function(){
147                         i++;
148                         move();
149                     })
150                     
151                     li2.mouseenter(function(){
152                         i = $(this).index();
153                         move();
154                     })
155                     
156                     $("#box").hover(function(){
157                         clearInterval(timer);
158                     }, 
159                     function(){
160                         timer = setInterval(function(){
161                             i++;
162                             move();
163                         }, 2000);
164                     })
165                 }
166                 
167             })
168         </script>
169     </head>
170     <body>
171         <div id="box">
172             <ul id="list1">
173                 <!--<li><img src="images/b1.jpg" /></li>
174                 <li><img src="images/b2.jpg" /></li>
175                 <li><img src="images/b3.jpg" /></li>
176                 <li><img src="images/b4.jpg" /></li>-->
177             </ul>
178             <ul id="list2">
179                 <!--<li class="active">1</li>
180                 <li>2</li>
181                 <li>3</li>
182                 <li>4</li>-->
183             </ul>
184             <div id="prev">上一页</div>
185             <div id="next">下一页</div>
186         </div>
187     </body>
188 </html>