废话不多说了、直接给大家贴代码了。
无缝轮播图:
<title>无缝轮播图</title> <style>*{margin:0; padding:0; } ul {list-style:none;}。banner {width:600px; height:300px; border:2px solid #ccc; margin:100px auto; position:rateration:hidden;}。 100%; Text-align:center; font-size:0;}。num li {width:10px; height:10px; background:rgba(0,0,0,0.5); display:border-radius:100%; display:インラインブロック; 50px;高さ:100px;背景:RGBA(0,0,0,0.6);色:#fff; font-size:40px; line-height:100px; text-align:center; cursor:pointer;}。 0;トップ:50%;マージントップ:-50px;} href = "#"> <img src = "img/1.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/jpg/</</< href = "#"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "#"> <img src = "img/5.jpg"> </a> </li> </ul> <ul> </ul> // <div> <span> <</span> <span >> </span> </div> </div> <script> $(function(){var i = 0; var timer = null; for(var j = 0; j <$( '。imgli')。 li ')。addclass(' active ');下一个按钮$( '。次の')。クリック(function(){i ++; if(i == $('。imgli ')。length){i = 1;//这里不是i= 0 $('。img ')。 //保证无缝轮播、设置左值}; $( '。img')。stop()。animate({left:-i*600}、300); if(i == $('。imgli ') li ')。eq(0).addclass(' active ')。siblings()。removeclass(' active ');} else {$('。numli ')。eq(i).addclass(' active ') (i == -1){i = $( '。imgli')。length-2; $ 2; $( '。img')。css({左: - ($('。imgli ')。長さ1)*600});} $('。img ') li ')。eq(i).addclass(' active ')。siblings()。removeclass(' active ');})//设置按钮的显示和隐藏$('。バナー ') li ')。マウスオーバー(function(){var _index = $(this).index(); $('。img ') li ')。eq(_index).addclass(' active ')。siblings()。removeclass(' active ');})// {i = 1; $( '。img')。css({left:0});}; $('。img ') li ')。eq(0).addclass(' active ')。siblings()。removeclass(' active ');} else {$('。num li ')。eq(i).addclass(' active ')。siblings()。removeclass(' active ');}}、1000)//鼠标移入、暂停自动播放、移出$('。バナー ') (i == $('。imgli ')。長さ){i = 1; $('。img ')。css({左:0});}; $('。img ') li ')。eq(0).addclass(' active ')。siblings()。removeclass(' active ');} else {$('。numli ')。eq(i).addclass(' active ')以上代码是使用js、代码比较简单、所以没有给大家注释、如果有疑问欢迎给我留言。