<!doctype html> <html> <head> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="css/css.css"/> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> </head> <style> *{margin:0px; padding:0px;} .flash{1200px; height:400px; overflow:hidden;margin: 0 auto;position:relative;color:#fff;} .flash .con li{100%; height:400px;position:absolute; left:0px; top:0px;right:0} .flash ul.but{ 100%; position:absolute;top:325px; left:15%; z-index:222;} .flash ul.but li{160px; display:inline-block;float:left;} .flash ul.but li.current{background:url("images/dot.png") 0px 0px;} .flash ul.but li img{132px;height: 60px;} </style> <body> <div class="flash" style="border:1px solid #ccc;"> <ul class="con"> <li style="background:url('images/1.jpg') no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url('images/2.jpg') no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url('images/3.jpg') no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url('images/4.jpg') no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url('images/5.jpg') no-repeat 0 0 ;background-size:100%;"></li> <li style="background:url('images/6.jpg') no-repeat 0 0 ;background-size:100%;"></li> </ul> <ul class='but'> <li class="current"><img src="images/1.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src="images/2.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src="images/3.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src="images/4.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src="images/5.jpg" alt="images/2.jpg" id="2.html" /></li> <li><img src="images/6.jpg" alt="images/2.jpg" id="2.html" /></li> </ul> <!-- 小图标 --> </div> <script type="text/javascript"> var index = 0; var times; var nowIndex=0; time=setInterval(function times(){ index++; if(index>3){index=0} $(".con li").eq(index).fadeIn().siblings().fadeOut(); $(".but li").eq(index).addClass('current').siblings().removeClass('current'); },3000); $('.but li').mouseover(function(){ clearInterval(time); $(this).addClass('current').siblings().removeClass('current'); $(".con li").eq($(".but li").index($(this))).fadeIn().siblings().fadeOut(); }) $('.but li').mouseout(function(){ index=-1; time=setInterval(function times(){ index++; if(index>3){ index=0} $(".con li").eq(index).fadeIn().siblings().fadeOut(); $(".but li").eq(index).addClass('current').siblings().removeClass('current'); },3000); }) </script> </body> </html>