<!doctype html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>jQuery图片轮换效果</title> <style type="text/css"> *{ margin:0px; padding:0px; text-align:center; } #banner{ 730px; height:454px; margin:50px auto; position:relative;/*相对定位,相对于.btn按钮*/ text-align:left; } .pic image { display:block;/*默认有图片不显示*/ position:absolute;/*绝对定位.对应的是.pic这个div*/ top:0px; left:0px; } .pic a{ display:none; } .pic{ /*专门显现图片区*/ position:relative;/*相对定位.对应.pic img*/ border:1px solid red; } .btn{ 150px; height:18px; position:absolute;/*绝对定位相对于banner div*/ bottom:5px; right:290px; } .btn ul li{ background-color:#000000;/*黑色*/ color:#ffffff; list-style-type:none; 18px; height:18px; float:left; border-radius:9px;/*变成圆的*/ text-align:center; line-height:18px; cursor:pointer;/*鼠标移动变手指状态*/ margin-left:5px; } .btn ul li.one{ background-color:#ff9966; } </style> <script src="jquery-3.0.0.min.js"></script> <script> $(function(){ $("#all li").mouseover(function(){//鼠标进入离开事件 $(this).css("background-color","#ff00ff").siblings().css("background-color","white"); $(this).css({"background-color":"red","font-size":"9px"}).siblings().hide(); }); $(window).scroll(function(){//鼠标滚动事件 var _top=$(window).scrollTop();//获得鼠标滚动的距离 }); //手动播放图片 $(".btn ul li").hover(function(){ $(this).addClass("one").siblings().removeClass("one"); index=$(this).index(); i=index; $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide(); }); //自动播放图片 var i=0; var t=setInterval(autoplay,1000); function autoplay(){ i++; if(i>5)i=0; $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one"); $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide(); } $("#banner").hover(function(){ clearInterval(t); },function(){ t=setInterval(autoplay,1000); }); }); </script> </head> <body> <!--<ul id="all"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> <li>第六个</li> <li>第七个</li> </ul>--> <!--<div style="600px;height:900px;background-color:#ffcc66">ttt</div>--> <div id="banner"> <div class="pic"> <a href="#" style="display:block"><img src="image/1.jpg"/></a> <a href="#"><img src="image/2.png"/></a> <a href="#"><img src="image/3.jpg"/></a> <a href="#"><img src="image/4.jpg"/></a> <a href="#"><img src="image/5.jpg"/></a> <a href="#"><img src="image/6.jpg"/></a> </div> <div class="btn"> <ul> <li class="one">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div> </div> </body> </html>