轮播小实例(原创)

Html

Css

* {
	margin:0;
	padding:0;
	text-decoration:none
}
body {
	padding:20px
}
#container {
	width:1000px;
	height:600px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#list {
	width:7000px;
	height:600px;
	position:absolute;
	z-index:1
}
#list img {
	float:left;
	width:1000px;
	height:600px
}
#buttons {
	position:absolute;
	height:10px;
	width:140px;
	z-index:2;
	bottom:20px;
	left:440px
}
#buttons span {
	cursor:pointer;
	float:left;
	width:10px;
	height:10px;
	border-radius:50%;
	background:#666;
	border:1px solid #fff;
	margin-left:10px
}
#buttons .on {
	background:#fff;
}
.arrow {
	cursor:pointer;
	display:none;
	line-height:40px;
	text-align:center;
	font-size:50px;
	height:45px;
	width:40px;
	position:absolute;
	z-index:2;
	top:280px;
	background:rgba(0,0,0,.1);
	color:#fff
}
.arrow:hover {
	background:rgba(0,0,0,.4)
}
#container:hover .arrow {
	display:block
}
#prev {
	left:20px
}
#next {
	right:20px
}

window.onload = function() {

var container = document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var len = 5;
    var animated = false;
    var timer;

function animate(offset) {
        animated = true;
        var newLeft = parseInt(list.style.left) + offset;
        var time = 300;
        var interval = 10;
        var speed = offset / (time / interval);

function go() {
            if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {
                list.style.left = parseInt(list.style.left) + speed + 'px';
                setTimeout(go, interval);
            } else {

list.style.left = newLeft + 'px';
                if (newLeft > -1000) {
                    list.style.left = -5000 + 'px';
                }
                if (newLeft < -5000) {
                    list.style.left = -1000 + 'px';
                }
                animated = false;
            }
        }
        go();
    }

function play() {
        timer = setTimeout(function() {
            next.onclick();
            play();
        }, 3000);
    }

function stop() {
        clearTimeout(timer);
    }

next.onclick = function() {
        if (animated) {
            return;
        }
        if (index == len) {
            index = 1;
        } else {
            index++;
        }
        showButton();
        animate(-1000);
    }
    prev.onclick = function() {
        if (animated) {
            return;
        }
        if (index == 1) {
            index = len;
        } else {
            index--;
        }
        showButton();
        animate(1000);
    }

for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function() {
            if (animated) {
                return;
            }
            if (this.className == 'on') {
                return;
            }
            var myIndex = parseInt(this.getAttribute('index'));
            var offset = -1000 * (myIndex - index);
            index = myIndex;
            animate(offset);
            showButton();
        }
    }
    container.onmouseover = stop; 
    container.onmouseout = play;
    play();
}

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

立即下载

轮播小实例(原创)

代码描述：图片轮播(仅供参考)

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Mr Cheng

相关代码

轮播小实例(原创)

最新