<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<script src="js/jquery-1.10.2.min.js"></script>--> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <title></title> <style> *{ margin: 0; padding:0; } ul{ list-style: none; } .banner{ width: 600px; height: 300px; border: 2px solid #ccc; margin: 100px auto; position: relative; overflow: hidden; z-index: 1; } .img{ position: absolute; top: 0; left: 0; } .des{ position: absolute; bottom: 0; left: 0; z-index: -2; background: #ccc; } .des li{ float: left; width: 600px; } .img li{ float: left; } .num{ position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .num li{ width: 10px; height: 10px; background:rgba(0,0,0,0.5); display: block; border-radius: 100%; display: inline-block; margin: 0 5px; cursor: pointer; } .btn{ display: none; } .btn span{ display: block; width: 50px; height: 100px; background: rgba(0,0,0,0.6); color: #fff; font-size: 40px; line-height: 100px; text-align: center; cursor:pointer; } .btn .prev{ position: absolute; left: 0; top: 50%; margin-top: -50px; } .btn .next{ position: absolute; right: 0; top: 50%; margin-top: -50px; } .num .active{ background-color: #fff; } .hide{ display: none; } </style> </head> <body> <div class="banner"> <ul class="img"> <li><a href="#"><img width="600" height="300" src="img/adver01.jpg" alt="第1张图片"></a></li> <li><a href="#"><img width="600" height="300" src="img/adver02.jpg" alt="第2张图片"></a></li> <li><a href="#"><img width="600" height="300" src="img/adver03.jpg" alt="第3张图片"></a></li> <li><a href="#"><img width="600" height="300" src="img/adver04.jpg" alt="第4张图片"></a></li> <li><a href="#"><img width="600" height="300" src="img/adver05.jpg" alt="第5张图片"></a></li> <li><a href="#"><img width="600" height="300" src="img/adver06.jpg" alt="第6张图片"></a></li> </ul> <ul class="num"></ul> <ul class="des"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="btn"> <span class="prev" onselectstart="return false;"><</span> <span class="next" onselectstart="return false;">></span> </div> </div> <script> $(function(){ var i=0; var timer=null; for (var j = 0; j < $('.img li').length; j++) { //创建圆点 $('.num').append('<li></li>') } $('.num li').first().addClass('active'); //给第一个圆点添加样式 var firstimg=$('.img li').first().clone(); //复制第一张图片 $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度 $('.des').width($('.img li').length*($('.img img').width()) ); // 下一个按钮 $('.next').click(function(){ i++; if (i==$('.img li').length) { i=1; $('.img').css({left:0}); //保证无缝轮播，设置left值 }; $('.img').stop().animate({left:-i*600},300); if (i==$('.img li').length-1) { //设置小圆点指示 $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } }) // 上一个按钮 $('.prev').click(function(){ i--; if (i==-1) { i=$('.img li').length-2; $('.img').css({left:-($('.img li').length-1)*600}); } $('.img').stop().animate({left:-i*600},300); $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); }) //设置按钮的显示和隐藏 $('.banner').hover(function(){ $('.btn').show(); },function(){ $('.btn').hide(); }) //鼠标划入圆点 $('.num li').mouseover(function(){ var _index=$(this).index(); $('.img').stop().animate({left:-_index*600},150); $('.num li').eq(_index).addClass('active').siblings().removeClass('active'); $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide'); }) //定时器自动播放 timer=setInterval(function(){ i++; if (i==$('.img li').length) { i=1; $('.img').css({left:0}); }; $('.img').stop().animate({left:-i*600},300); if (i==$('.img li').length-1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } },2000) //鼠标移入，暂停自动播放，移出，开始自动播放 $('.banner').hover(function(){ clearInterval(timer); },function(){ timer=setInterval(function(){ i++; if (i==$('.img li').length) { i=1; $('.img').css({left:0}); }; $('.img').stop().animate({left:-i*600},300); if (i==$('.img li').length-1) { $('.num li').eq(0).addClass('active').siblings().removeClass('active'); $('.des li').eq(0).removeClass('hide').siblings().addClass('hide'); }else{ $('.num li').eq(i).addClass('active').siblings().removeClass('active'); $('.des li').eq(i).removeClass('hide').siblings().addClass('hide'); } },2000) }) }) </script> </body> </html>