风吹钰成花丶

不积小流无以成江海。

js无缝横排滚动图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js无缝横排滚动图片</title>
<style>
* {
	margin:0;
	padding:0
}
#div1 {
	width:800px;
	height:120px;
	margin:100px auto;
	position:relative;
	background:red;
	overflow:hidden
}
#div1 ul {
	position:absolute;
	left:0;
	top:0
}
#div1 ul li {
	float:left;
	width:200px;
	height:120px;
	list-style:none
}
</style>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="http://www.jq22.com/img/cs/500x500-1.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-2.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-3.png"></li>
        <li><img src="http://www.jq22.com/img/cs/500x500-4.png"></li>
    </ul>
</div>

<script>
window.onload = function() {
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');

    var speed = 2;

    //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    oUl.innerHTML += oUl.innerHTML
    oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

    function move() {
        if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
            oUl.style.left = '0';
        }
        if (oUl.offsetLeft > 0) {
            oUl.style.left = -oUl.offsetWidth / 2 + 'px'
        }
        oUl.style.left = oUl.offsetLeft + speed + 'px';

    }

    var timer = setInterval(move, 30)
    oDiv.onmousemove = function() {
        clearInterval(timer);
    };
    oDiv.onmouseout = function() {
        timer = setInterval(move, 30)
    };
    document.getElementsByTagName('a')[0].onclick = function() {
        speed = -2;
    }
    document.getElementsByTagName('a')[1].onclick = function() {
        speed = 2;
    }
}
</script>

</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

js图片无缝平滑滚动

2013年10月28日 3KB 下载

没有更多推荐了,返回首页

不良信息举报

js无缝横排滚动图片

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭