jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换



1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>JQ轮播图,图片可调用,自动+鼠标点击切换</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 body,ul,ol,li,img{margin:0;padding:0;} 9 ul,ol,li{list-style:none;} 10 img{vertical-align:top;} 11 #img_box{width:470px;height:150px;margin:30px auto;position:relative;overflow: hidden;} 12 #img_box ul{position:absolute;top:0;left:0;z-index:1;} 13 #img_box ol{position:absolute;bottom:15px;right:15px;z-index:2;} 14 #img_box ol li{display:inline-block;cursor:pointer;width:20px;height:20px;margin-right:5px;line-height:20px;text-align:center;background:#fff; color:#f60;} 15 #img_box ol .active{background:#f60; color:#fff;padding:2px;bottom:2px;} 16 </style> 17 <script> 18 $(function(){ 19 var iNow = 0; 20 var timer = null; 21 var $imgLi=$('#img_box ul li'); 22 if($imgLi.length>0){ 23 for(var i = 1; i <= $imgLi.length; i++){ 24 var $olLi=$('<li>'+ i +'</li>'); 25 $('#img_box ol').append($olLi); 26 } 27 $('#img_box ol li').eq(0).attr('class','active'); 28 }; 29 30 timer = setInterval(toRun,2000); 31 function toRun(){ 32 if($imgLi.length>1){ 33 if(iNow == $imgLi.length-1){ 34 iNow = 0; 35 } 36 else{ 37 iNow++; 38 } 39 $('#img_box ol li').attr('class',''); 40 $('#img_box ol li').eq(iNow).attr('class','active'); 41 $('ul').stop().animate({top : -150 * iNow},1000); 42 } 43 } 44 $('#img_box').mouseover(function(){ 45 clearInterval(timer); 46 }).mouseout(function(){ 47 timer=setInterval(toRun,2000); 48 }); 49 $('#img_box ol li').click(function(ev){ 50 //console.log($(this).html()); 51 $('#img_box ol li').attr('class',''); 52 $(this).attr('class','active'); 53 iNow = $(this).html()-1; 54 $('ul').stop().animate({top : -150 * iNow},1000); 55 }) 56 }); 57 </script> 58 </head> 59 <body> 60 <div id="img_box"> 61 <ul> 62 <li><img src="img/1.jpg" alt="" /></li> 63 <li><img src="img/2.jpg" alt="" /></li> 64 <li><img src="img/3.jpg" alt="" /></li> 65 <li><img src="img/4.jpg" alt="" /></li> 66 <li><img src="img/5.jpg" alt="" /></li> 67 <li><img src="img/3.jpg" alt="" /></li> 68 <li><img src="img/4.jpg" alt="" /></li> 69 <li><img src="img/5.jpg" alt="" /></li> 70 </ul> 71 <ol> 72 <!--<li class="active">1</li> 73 <li>2</li> 74 <li>3</li> 75 <li>4</li> 76 <li>5</li>--> 77 </ol> 78 </div> 79 </body> 80 </html>

 

转载于:https://www.cnblogs.com/xwnlh/p/7028268.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值