标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 5 <title></title> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 7 <meta content="always" name="referrer"> 8 <meta name="theme-color" content="#2932e1"> 9 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 10 <link href="base.css" rel="stylesheet" type="text/css" /> 11 <style type="text/css" media="screen"> 12 .al{height: 600px;width: 1000px;position: relative;margin: 30px auto 0;} 13 .wrap,.imgbox,.num{height: 600px;width: 1000px;position: absolute;overflow: hidden;} 14 .imgbox li{height: 600px;width: 1000px;float: left;} 15 .imgbox li img{height: 600px;width: 1000px;display: inline-block;} 16 .numbox{height: 30px;width:300px;position: absolute;bottom: 30px;right: 280px;} 17 .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;} 18 .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;} 19 .left,.right{width: 41px;height: 69px;position: absolute;display: inline-block;z-index: 9999;} 20 .left{top:280px;left:0;background:url(images/icon.png)-84px 0 no-repeat;} 21 .right{top:280px;right:0;background:url(images/icon.png)-125px 0 no-repeat;} 22 .left:hover{background: url(images/icon.png)0 0 no-repeat;} 23 .right:hover{background: url(images/icon.png)-43px 0 no-repeat;} 24 </style> 25 </head> 26 <body> 27 <div class="al"> 28 <a href="#" class="left"></a> 29 <a href="#" class="right"></a> 30 <div class="wrap"> 31 <ul class="imgbox"> 32 <li><img src="images/bg1.jpg" /></li> 33 <li><img src="images/bg2.jpg" /></li> 34 <li><img src="images/bg3.jpg" /></li> 35 <li><img src="images/bg4.jpg" /></li> 36 <li><img src="images/bg5.jpg" /></li> 37 </ul> 38 </div> 39 <div class="num"> 40 <ul class="numbox"> 41 <li class="select"></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 </ul> 47 </div> 48 49 </div> 50 <script> 51 /* var time = ""; 52 var index = 1; 53 $(function () { 54 showimg(index); 55 //鼠标移入移出 56 $(".numbox li").hover(function () { 57 clearTimeout(time); 58 var ind=$(this).index(); 59 $(this).addClass(‘select‘).siblings().removeClass(‘select‘); 60 $(".imgbox li").hide().stop(true,true).eq(ind).fadeIn("slow"); 61 }, function () { 62 index=$(this).index()+2> 5 ? 1 :$(this).index()+2; 63 time = setTimeout("showimg(" + index+ ")", 3000); 64 }); 65 }); 66 67 function showimg(num) { 68 index = num; 69 $(".numbox li").removeClass("select").eq(index-1).addClass("select"); 70 $(".imgbox li").hide().stop(true,true).eq(index-1).fadeIn("slow"); 71 index = index + 1 > 5 ? 1 : index + 1; 72 time = setTimeout("showimg(" + index + ")", 3000); 73 }*/ 74 75 var index=1; 76 var timer=""; 77 autopl(index); 78 $(‘.numbox li‘).mouseover(function(){ 79 clearTimeout(timer); 80 var num=$(this).index(); 81 $(this).addClass(‘select‘).siblings().removeClass(‘select‘); 82 $(‘.imgbox li‘).eq(num).fadeIn(‘slow‘).siblings().hide(); 83 }); 84 $(‘.numbox li‘).mouseout(function(){ 85 index=$(this).index()+2> 5 ? 1 :$(this).index()+2; 86 timer = setTimeout("autopl(" + index+ ")", 3000); 87 }); 88 89 function autopl(numb){ 90 index =numb; 91 $(‘.numbox li‘).eq(index-1).addClass(‘select‘).siblings().removeClass(‘select‘); 92 $(‘.imgbox li‘).eq(index-1).fadeIn(‘slow‘).siblings().hide(); 93 index=index+1 > 5 ? 1 : index + 1; 94 timer = setTimeout(‘autopl(‘ +index+ ‘)‘,3000); 95 } 96 $(‘.left‘).click(function(){ 97 clearTimeout(timer); 98 var ind=$(‘.numbox li‘).index($(‘.select‘)); 99 var inde=ind+1>1?ind-1:4; 100 $(‘.numbox li‘).eq(inde).addClass(‘select‘).siblings().removeClass(‘select‘); 101 $(‘.imgbox li‘).eq(inde).fadeIn(‘slow‘).siblings().hide(); 102 index=inde+1<5?inde+1:0; 103 timer=setTimeout(‘autopl(‘+index+‘)‘,3000); 104 }) 105 $(‘.right‘).click(function(){ 106 clearTimeout(timer); 107 var ind=$(‘.select‘).index(); 108 var inde=ind+1<5?ind+1:0; 109 $(‘.numbox li‘).eq(inde).addClass(‘select‘).siblings().removeClass(‘select‘); 110 $(‘.imgbox li‘).eq(inde).fadeIn(‘slow‘).siblings().hide(); 111 index=inde+1<5?inde+1:0; 112 timer=setTimeout(‘autopl(‘+index+‘)‘,3000); 113 }) 114 115 </script> 116 117 </body> 118 </html>
标签：
原文地址：http://www.cnblogs.com/mk2016/p/5464384.html
