<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="always" name="referrer"> <meta name="theme-color" content="#2932e1"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="base.css" rel="stylesheet" type="text/css" /> <style type="text/css" media="screen"> .al{height: 600px;width: 1000px;position: relative;margin: 30px auto 0;} .wrap,.imgbox,.num{height: 600px;width: 1000px;position: absolute;overflow: hidden;} .imgbox li{height: 600px;width: 1000px;float: left;} .imgbox li img{height: 600px;width: 1000px;display: inline-block;} .numbox{height: 30px;width:300px;position: absolute;bottom: 30px;right: 280px;} .numbox li{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: blue;} .numbox .select{width: 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: red;} </style> </head> <body> <div class="al"> <div class="wrap"> <ul class="imgbox"> <li><img src="images/bg1.jpg" alt="" /></li> <li><img src="images/bg2.jpg" alt="" /></li> <li><img src="images/bg3.jpg" alt="" /></li> <li><img src="images/bg4.jpg" alt="" /></li> <li><img src="images/bg5.jpg" alt="" /></li> </ul> </div> <div class="num"> <ul class="numbox"> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script> /* var time = ""; var index = 1; $(function () { showimg(index); //鼠标移入移出 $(".numbox li").hover(function () { clearTimeout(time); var ind=$(this).index(); $(this).addClass('select').siblings().removeClass('select'); $(".imgbox li").hide().stop(true,true).eq(ind).fadeIn("slow"); }, function () { index=$(this).index()+2> 5 ? 1 :$(this).index()+2; time = setTimeout("showimg(" + index+ ")", 3000); }); }); function showimg(num) { index = num; $(".numbox li").removeClass("select").eq(index-1).addClass("select"); $(".imgbox li").hide().stop(true,true).eq(index-1).fadeIn("slow"); index = index + 1 > 5 ? 1 : index + 1; time = setTimeout("showimg(" + index + ")", 3000); }*/ var index=1; var timer=""; autopl(index); $('.numbox li').mouseover(function(){ clearTimeout(timer); var num=$(this).index(); $(this).addClass('select').siblings().removeClass('select'); $('.imgbox li').eq(num).fadeIn('slow').siblings().hide(); }); $('.numbox li').mouseout(function(){ index=$(this).index()+2> 5 ? 1 :$(this).index()+2; timer = setTimeout("autopl(" + index+ ")", 2000); }); function autopl(numb){ index =numb; $('.numbox li').eq(index-1).addClass('select').siblings().removeClass('select'); $('.imgbox li').eq(index-1).fadeIn('slow').siblings().hide(); index=index+1 > 5 ? 1 : index + 1; timer = setTimeout('autopl(' +index+ ')',2000); } </script> </body> </html>