js实现横向滚动轮播并中间暂停下
2019-07-01 本文已影响0人
前端召唤师
效果：
轮播.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>滚动+停顿</title>
<style type="text/css">
body {
margin: 0;
}
#container {
position: relative;
height: 200px;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 200px;
}
#list .item {
float: left;
text-align: center;
}
.slide {
width: 200px;
height: 200px;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="container" class="container">
<div id="list"></div>
</div>
<script type="text/javascript" language=javascript>
window.qglist = [{
gimg: 'img/1.jpg',
gname: '111'
},
{
gimg: 'img/2.jpg',
gname: '222'
},
{
gimg: 'img/3.jpg',
gname: '333'
}
];
initScroll();
function initScroll() {
var len = window.qglist.length,
j = 0,
l = window.qglist.length - 1,
string1 = makeStr(window.qglist, l),
string2 = makeStr(window.qglist, 0);
$('#list').append(string1);
while (j < len) {
var string = makeStr(window.qglist, j);
$('#list').append(string);
j++;
}
$('#list').append(string2);
window.scrWid = $('.container')[0].offsetWidth + 'px';
$('#list').css("left", '-' + scrWid);
$('.item').css("width", scrWid);
var container = $('#container'),
list = document.getElementById('list'),
index = 1,
timer;
function animate(offset, unit) {
var newLeft = parseInt(list.style.left) - unit,
newL = Math.abs(newLeft),
scrW = parseInt(window.scrWid),
num = newL % scrW;
if (num == 0) {
stop();
setTimeout(function() {
play();
}, 2000);
}
list.style.left = newLeft + 'px';
//无限滚动判断
if (newLeft > offset) {
list.style.left = offset * len + 'px';
}
if (newLeft < offset * (len + 1)) {
list.style.left = offset + 'px';
}
}
function play() {
//重复执行的定时器
timer = setInterval(function() {
start();
}, 1)
}
function stop() {
clearInterval(timer);
}
function start() {
if (index > len) {
index = 1
}
var n = parseInt(scrWid);
animate(-n, 1);
index += 1;
};
if (len > 1) {
play();
}
}
function makeStr(arr, n) {
var str = "<div class='item'><div>" +
"<img class='slide' src='" + arr[n].gimg + "'></div></div>";
return str;
}
</script>
</body>
</html>
