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>