jQuery製做無縫輪播的焦點圖

時間 2019-11-17

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery無縫輪播的焦點圖</title>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
var clone = $(".banner .img li").first().clone(); //複製第一張圖片
$(".banner .img").append(clone) ; //把複製好的第一張圖片放到最後一張圖片的後面
var size = $(".banner .img li").size(); //得到li的個數

for(var j=0;j<size-1;j++){
$(".banner .num").append("<li></li>");
}

$(".banner .num li").first().addClass("on"); //爲第一個li添加on的樣式
// 鼠標劃入圓點
$(".banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(".banner .img").stop().animate({left:-index*640},500);
$(this).addClass("on").siblings().removeClass("on");
})

// 自動輪播
var t=setInterval(moveL,2000)

// 對banner的定時器的操做
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(moveL,2000)
})

// 向左的按鈕
$(".banner .btn_l").click(function(){
moveL()
// i++
// if (i==size){
// $(".banner .img").css({left:0})
// i=1;
//
// //i=0;
// }
// $(".banner .img").stop().animate({left:-i*640},500);
// $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");//爲li賦上on的樣式，順便把同級的li的on扥樣式清除掉
})
// 向右的按鈕
$(".banner .btn_r").click(function(){
moveR()
// i--
// if (i==-1){
// $(".banner .img").css({left:-(size-1)*500})
// i=size-2;
// //i=size-1;
// }
// $(".banner .img").stop().animate({left:-i*640},500);
// $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
})
function moveL(){
i++
if (i==size){
$(".banner .img").css({left:0})
i=1;

//i=0;
}
$(".banner .img").stop().animate({left:-i*640},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");//爲li賦上on的樣式，順便把同級的li的on扥樣式清除掉
}

function moveR(){
i--
if (i==-1){
$(".banner .img").css({left:-(size-1)*500})
i=size-2;
//i=size-1;
}
$(".banner .img").stop().animate({left:-i*640},500);
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
})
</script>
<style>
*{padding:0;margin:0;list-style: none;}
.banner{width: 640px;height: 350px;margin: 100px;border: 3px solid #000;position: relative;overflow: hidden;}
.banner .img{width: 2560px;position: absolute;left: 0;top: 0;}
.banner .img li{float: left;}

.banner .num{width: 100%;text-align: center;position: absolute;bottom: 10px;left: 0;}
.banner .num li{height: 10px;width: 10px;background: #888;border-radius: 50%;display: inline-block;margin:0 5px;}
.banner .num li.on{background: red;}

.banner .btn{position: absolute;background: rgba(0,0,0,0.5);width: 30px;height: 50px;line-height: 50px;top:50%;color: #fff;font-size: 30px;font-family: "宋體";margin-top: -25px;text-align: center;cursor: pointer;display: none;}
.banner:hover .btn{display:block;}
.banner .btn_l{left:0}
.banner .btn_r{right:0}
</style>

</head>

<body>
<div class="banner">
<ul class="img">
<li><a href=""><img src="img/banner01.jpg"></a></li>
<li><a href=""><img src="img/banner02.jpg"></a></li>
<li><a href=""><img src="img/banner03.jpg"></a></li>
</ul>

<ul class="num">
</ul>

<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>

</div>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。