您的位置：首页 > Web前端 > JQuery

JQuery之無縫輪播（part4）

2019-04-01 14:13 28 查看

今天寫的寫的這個是自適應的無縫輪播。

1：setInterval（）定時器

2：clearInterval（）關閉定時器

方法一和方法二很像，只有細微差別。

方法一：

[code]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html,
ul,
li {
padding: 0;
margin: 0;
}

li {
list-style: none;
}

.banner_div {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}

.banner_img {
width: 400%;
height: auto;

}

.banner_img li {
width: 25%;
height: auto;
float: left;

}

.banner_img li img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

.banner_num {
position: absolute;
bottom: 3%;
bottom: 3vh;
width: 100%;
text-align: center;
}

.banner_num li {
float: none;
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
border: 2px solid #3eb5ff;
background: #fff;
box-sizing: border-box;
cursor: pointer;
}

.banner_num li.active {
background: #3eb5ff;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="banner_div">
<ul class="banner_num"></ul>
<ul class="banner_img">
<li style="background:#01020f;">
<a target="_black" href="">
<img src="img/7b5085f583e732a0c5de3ef183f5e6811553155542.jpg" />
</a>
</li>
<li style="background:#01020f;">
<a target="_black" href="">
<img src="img/25a81eee1ea53311c4947c82c091a09e1551845761.jpg" />
</a>
</li>
<li style="background:#01020f;">
<a target="_black" href="">
<img src="img/7640717475412ec189396ea6c73a66921548819501.jpg" />
</a>
</li>
<li style="background:#01020f;">
<a target="_black" href="">
<img src="img/7b5085f583e732a0c5de3ef183f5e6811553155542.jpg" />
</a>
</li>
</ul>
</div>
<script src="js/jquery.min.js"> </script>
<script>
$(document).ready(function () {
var size = $(".banner_img li").length;//獲取li的長度
for (var j = 1; j < size; j++) {
var _html = '<li></li>';
$(".banner_num").append(_html);//添加小圓點
}
$(".banner_num li:first-child").addClass("active");//為第一個小圓點加active
var i = 0;
var t = setInterval(move, 4000);
$(".banner_div").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move, 4000);
});
$(".banner_num li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i = index;
if (i == 0) {
i = size - 1;
}
var left = -i * (100) + "%";
$(".banner_img").css("marginLeft", left);
});
function move() {
i++;
if (i == size - 1) {
show();
$(".banner_num li").eq(0).addClass("active").siblings().removeClass("active");
} else if (i == size) {
$(".banner_img").css("margin-left", "0");
i = 1;
show();
} else {
show();
}
}
function show() {
var left = -i * (100) + "%";
$(".banner_img").animate({ marginLeft: left }, 500);
$(".banner_num li").eq(i).addClass("active").siblings().removeClass("active");
}
})
</script>
</body>

</html>

方法二：

[code]            var time = 2000,
imgsize = $(".banner_img li").length,
index = 0,
t = setInterval(move, time);
for (let i = 0; i < imgsize - 1; i++) {
var linum = '<li></li>';
$(".banner_num").append(linum);
}

$(".banner_num li").first().addClass('active');

$(".banner_num").on("click", "li", function () {
$(this).addClass("active").siblings().removeClass('active');
var activedz = $(".active").prevAll().length;
index = activedz;
if (activedz == 0) {
activedz = imgsize - 1;//0=3
};
var left = -index * (100) + "%";
$(".banner_img").css("marginLeft", left);
});
$(".banner_div").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move, time);
});
function move() {
index++;
if (index == imgsize - 1) {
show();
$(".banner_num li").eq(0).addClass("active").siblings().removeClass("active");
} else if (index == imgsize) {
$(".banner_img").css("margin-left", "0");
index = 1;
show();
} else {
show();
}
};
function show() {
var left = -index * (100) + "%";
$(".banner_img").animate({ marginLeft: left }, 500);
$(".banner_num li").eq(index).addClass("active").siblings().removeClass("active");
}

結果為：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航