js 实现横向滚动轮播并中间暂停下
Posted linjiangxian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 实现横向滚动轮播并中间暂停下相关的知识，希望对你有一定的参考价值。
效果：
html:
<!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>
以上是关于js 实现横向滚动轮播并中间暂停下的主要内容，如果未能解决你的问题，请参考以下文章