js无缝轮播图

Html

Css

* {
	margin:0;
	padding:0;
}
img {
	width:200px;
	height:310px;
	float:left;
}
#outer {
	margin:50px auto;
	width:1000px;
	height:310px;
	border:1px solid crimson;
	overflow:hidden;
	/*把多余的部分隐藏掉*/
}
#inner {
	width:2000px;
	height:310px;
}
#inner div {
	float:left;
}

//定义变量初值
var dOuter = null;
var demo1 = null;
var demo2 = null;
var timer = null;
//绑定事件
window.onload = function() {
    dOuter = document.getElementById('outer');
    demo1 = document.getElementById('demo1');
    demo2 = document.getElementById('demo2');
    demo2.innerHTML = demo1.innerHTML;
    //			timer=setInterval(moveLeft,10);
    clock();
    //绑定鼠标
    dOuter.onmouseover = function() {
        clearInterval(timer);
    }
    dOuter.onmouseout = function() {
        //				timer=setInterval(moveLeft,10);
        clock()
    }
}

//重新定义一个函数
function clock() {
    clearInterval(timer);
    timer = setInterval(moveLeft, 10);
}

function clock2() {
    clearInterval(timer);
    timer = setInterval(moveRight, 10);
}

//计时器函数
function moveLeft() {
    //容器向左滚动的距离
    dOuter.scrollLeft += 2;
    //判断临界值
    if (dOuter.scrollLeft >= demo1.offsetWidth) {
        dOuter.scrollLeft = 0;
    }

//每一幅图停顿一次
    if (dOuter.scrollLeft % 200 == 0) {
        clearInterval(timer);
        timer = setTimeout(clock, 1500);
    }
}
//向右
function moveRight() {
    //容器向右滚动的距离
    dOuter.scrollLeft -= 2;
    //判断临界值
    if (dOuter.scrollLeft <= 0) {
        dOuter.scrollLeft = demo1.offsetWidth;
    }
    //每一幅图停顿一次
    if (dOuter.scrollLeft % 200 == 0) {
        clearInterval(timer);
        timer = setTimeout(clock2, 1500);
    }
}

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

立即下载

js无缝轮播图



代码描述：简单js无缝轮播图

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

虫儿在花儿上飞

相关代码

js无缝轮播图

最新