js图片轮播代码

Html

Css

* {
	margin:0;
	padding:0;
}
#div1 {
	width:640px;
	height:120px;
	margin:100px auto;
	background-color:#646464;
	position:relative;
	overflow:hidden;
}
#div1 ul {
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	background-color:#3b7796;
}
#div1 ul li {
	float:left;
	width:160px;
	height:120px;
	list-style:none;
}

window.onload = function() {
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');
    var speed = 2; //初始化速度

oUl.innerHTML += oUl.innerHTML; //图片内容*2-----参考图（2）
    var oLi = document.getElementsByTagName('li');
    oUl.style.width = oLi.length * 160 + 'px'; //设置ul的宽度使图片可以放下

var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');

function move() {
        if (oUl.offsetLeft < -(oUl.offsetWidth / 2)) { //向左滚动，当靠左的图4移出边框时
            oUl.style.left = 0;
        }

if (oUl.offsetLeft > 0) { //向右滚动，当靠右的图1移出边框时
            oUl.style.left = -(oUl.offsetWidth / 2) + 'px';
        }

oUl.style.left = oUl.offsetLeft + speed + 'px';
    }

oBtn1.addEventListener('click', function() {
        speed = -2;
    }, false);
    oBtn2.addEventListener('click', function() {
        speed = 2;
    }, false);

var timer = setInterval(move, 30); //全局变量 ，保存返回的定时器

oDiv.addEventListener('mouseout', function() {
        timer = setInterval(move, 30);
    }, false);
    oDiv.addEventListener('mousemove', function() {
        clearInterval(timer); //鼠标移入清除定时器
    }, false);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js图片轮播代码



代码描述：js简单图片左右滚动代码

更新时间：2022-02-14 00:39:21
js中的创建定时器的方法包括两种：settimeout和setinterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一个数字，代表过多少毫秒之后定时器执行函数。它们的不同在于：settimeout 是在经过指定的时间之后，只执行一次函数，而setinterval，则是每间隔指定时间，就执行函数一次，说简单点的话，就是setinterval是settimeout的循环版。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

相关代码

js图片轮播代码

最新