jq版輪播圖
阿新 • • 發佈:2018-11-11
UNC ready clear dde stop left float bottom div
html部分
<div class="banner"> <ul class="img"> <li><img src="login_bj1.jpg" alt=""/></li> <li><img src="login_bj1.jpg" alt="" /></li> <li><img src="login_bj1.jpg" alt="" /></li> <li><img src="login_bj1.jpg"alt="" /></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div>
Css部分
.banner { width:500px; height:300px; margin:100px auto; border:1px solid #808080; position:relative; overflow:hidden;} .banner .img{width:5000px; position:absolute; left:0px;top:0px;} .banner .img img{width:500px; height:300px;} .banner .img li{float:left;} .banner .num { position:absolute; width:100%; bottom:10px; left:0px; text-align:center; font-size:0px;} .banner .num li { width:10px; height:10px; background-color:#888; border-radius:50%;display:inline-block; margin:0px 3px; cursor:pointer;} .banner .num li.on {background-color: #ff6a00;} .banner .btn {width: 30px;height: 50px;background-color: #808080;opacity: 0.5; filter:alpha(opacity:0.5); position:absolute;top:50%; margin-top:-25px; cursor:pointer;text-align:center;line-height:50px;font-size:40px; color:#fff;font-family:"宋體";display:none;} .banner .btn_l { left:0px;} .banner .btn_r { right:0px;} .banner:hover .btn { display:block;}
js部分
$(document).ready(function () { var i = 0; var clone = $(".banner .img li").first().clone();//克隆第一張圖片 $(".banner .img").append(clone);//復制到列表最後 var size = $(".banner .img li").size(); for (var j = 0; j < size-1; j++) { $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass("on"); /*自動輪播*/ var t = setInterval(function () { i++; move();},2000); /*鼠標懸停事件*/ $(".banner").hover(function () { clearInterval(t);//鼠標懸停時清除定時器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //鼠標移出時清除定時器 }); /*鼠標滑入原點事件*/ $(".banner .num li").hover(function () { var index = $(this).index();//獲取當前索引值 i = index; $(".banner .img").stop().animate({ left: -index * 500 }, 500); $(this).addClass("on").siblings().removeClass("on"); }); /*向左按鈕*/ $(".banner .btn_l").click(function () { i++; move(); }) /*向右按鈕*/ $(".banner .btn_r").click(function () { i--; move(); }) /*移動事件*/ function move() { if (i == size) { $(".banner .img").css({ left: 0 }); i = 1; } if (i == -1) { $(".banner .img").css({ left: -(size - 1) * 500 }); i = size - 2; } $(".banner .img").stop().animate({ left: -i * 500 }, 500); if (i == size - 1) { $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); } } });
jq版輪播圖