2016-10-14 jq实现无缝轮播
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jq实现轮播图</title> 6 <style> 7 *{ 8 margin: 0 auto; 9 padding: 0; 10 text-decoration: none; 11 list-style: none; 12 } 13 #box{ 14 position: relative; 15 width: 478px; 16 height: 268px; 17 margin-top: 50px; 18 overflow: hidden; 19 } 20 #list{ 21 position: absolute; 22 width: 2868px; 23 height: 268px; 24 z-index: -1; 25 } 26 #list li{ 27 float: left; 28 } 29 #nums{ 30 position: absolute; 31 left: 205px; 32 bottom: 20px; 33 width: 120px; 34 height: 10px; 35 } 36 #nums li{ 37 float: left; 38 width: 10px; 39 height: 10px; 40 margin-right: 10px; 41 border: 1px solid #ccc; 42 border-radius: 50%; 43 background: #333; 44 cursor: pointer; 45 } 46 #nums li.on{ 47 background: #0080FF; 48 } 49 #box .btn{ 50 position: absolute; 51 top: 50%; 52 width: 28px; 53 height: 62px; 54 line-height: 62px; 55 text-align: center; 56 color: #fff; 57 font-size: 36px; 58 font-weight: 400; 59 background: rgba(0,0,0,.2); 60 cursor: pointer; 61 display: none; 62 } 63 #box .prev{ 64 left: 2px; 65 } 66 #box .next{ 67 right: 2px; 68 } 69 70 .btn:hover{ 71 background-color: RGBA(0, 0, 0, .7); 72 } 73 #box:hover .btn{ 74 display: block; 75 } 76 </style> 77 78 </head> 79 80 <body> 81 <div id = "box"> 82 <ul id = "list"> 83 <li><img src = "images/img1.jpg"></li> 84 <li><img src = "images/img2.jpg"></li> 85 <li><img src = "images/img3.jpg"></li> 86 <li><img src = "images/img4.jpg"></li> 87 <li><img src = "images/img5.jpg"></li> 88 </ul> 89 <ul id = "nums"> 90 <li class = "on"></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 <li></li> 95 </ul> 96 <a href = "javascript:;" class = "btn prev" ><</a> 97 <a href = "javascript:;" class = "btn next">></a> 98 </div> 99 <script src = "jquery.js"></script> 100 <script type="text/javascript"> 101 $(function(){ 102 var clone = $("#list li").first().clone();//复制第一张图片 103 $(‘#list‘).append(clone);//将复制的图片放置在图片最后 104 105 var size = $(‘#list li‘).size(); 106 var i = 0; 107 108 //鼠标点击圆点 109 $(‘#nums li‘).mouseover(function(){ 110 var index = $(this).index(); 111 i = index; 112 $(‘#list‘).stop().animate({left: i*-478},500); 113 $(this).addClass(‘on‘).siblings().removeClass(‘on‘); 114 }) 115 116 //向左轮播 117 $(‘.prev‘).click(function(){ 118 i--; 119 if(i == -1){ 120 $(‘#list‘).css({left: -(size -1)*478}); 121 i = size -2; 122 } 123 $(‘#list‘).stop().animate({left: -i*478},500); 124 $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘); 125 126 }); 127 128 //向右轮播 129 $(‘.next‘).click(function(){ 130 move(); 131 }); 132 function move(){ 133 i++; 134 if(i == size){ 135 $(‘#list‘).css({left: 0}); 136 i = 1; 137 } 138 $(‘#list‘).stop().animate({left: -i*478}); 139 if(i == size - 1){ 140 $(‘#nums li‘).eq(0).addClass(‘on‘).siblings().removeClass(‘on‘); 141 }else{ 142 $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘); 143 } 144 } 145 //定时器 146 var t = setInterval(function(){ 147 move(); 148 },1500); 149 150 //鼠标滑过停止自动播放 151 $(‘#box‘).hover(function(){ 152 clearInterval(t) 153 }, 154 function(){ 155 t=setInterval(function () { 156 moveR(); 157 },1500) 158 }); 159 }) 160 </script> 161 </body> 162 </html>
时间: 2024-10-31 01:08:42