<!doctype html> <html> <meta charset="utf-8"> <head> <title>轮播效果</title> <style> *{ margin: 0px ; padding: 0px; } body { background: green; } .box{ 600px; height: 400px; margin: 50px auto; overflow:hidden; position: relative; } .ctrl{ 50px; height: 50px; color: red; font-size: 50px; text-align:center; line-height:50px; background: none; border: none; outline: none; cursor: pointer; position: absolute; z-index: 10; top: 40%; display: none; } .next { right: 0; } .content{ 1800px; height: 400px; position: relative; left:-600px; } img { display: block; float: left; 600px; height: 400px; } .dot{ 100%; height: 50px; background: aqua; position: relative; bottom: 50px; text-align: center; line-height: 50px; } .dot div { display: inline-block; 14px; height: 14px; background: white; border: 1px solid red; border-radius: 8px; } .dot .selected{ background: purple; font-weight: bold; } </style> </head> <body> <div class="box"> <button class="ctrl prev"><</button> <button class="ctrl next"> > </button> <div class="content"> <img src="03.jpg" >#写你自己的图片路径就可以了 <img src="01.jpg" > <img src="02.jpg" > </div> <div class="dot"> <div class="selected"></div> <div></div> <div></div> </div> </div> </body> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script > $(function() { //记录现实的序号 var index=0 $('.box').hover(function() { $('.ctrl').show(300) },function() { $('.ctrl').hide(300) }) //prev 按钮 $('.prev').click(function() { //若内容正在动画，则立即返回 if ($('.content').is(':animated')){ return } $('.content').animate({left:0},'slow','linear',function() { //动画结束后，将最后一张图查到最开头 $('.content').prepend($('img:last')) //重新设置偏移 $('.content').css('left','-600px') //记录图片序号 if(--index==-1){ index=2 } $('.dot div').eq(index).addClass('selected').siblings(). removeClass('selected') }) $('.dot div').eq(index).click() }) //next 按钮 $('.next').click(function() { //若内容正在动画，则立即返回 if ($('.content').is(':animated')){ return } $('.content').animate({left:'-1200px'},'slow','linear',function() { //动画结束后，将最后一张图查到最开头 $('.content').append($('img:first')) //重新设置偏移 $('.content').css('right','-600px') if(++index==3) { index=0 } $('.dot div').eq(index).addClass('selected').siblings(). removeClass('selected') }) }) }) </script> </html>