焦点轮播图片的实现

标签：

DOM设定：

<div id = "container">

　　<div id = "list" style="left:-1024px;">

　　　　<img src = "../images/pic_01.jpg" alt = ""/>

　　　　<img src = "../images/pic_01.jpg" alt = ""/>

　　　　<img src = "../images/pic_01.jpg" alt = ""/>

　　</div>

　　<div class = "buttons">

　　　　<span index = "1" class = "on"><span>

　　　　<span index = "2"></span>

　　　　<span index = "3"></span>

　　</div>

　　<a href = "javascript:;" id = "prev" class = "arrow">&lt;</a>

　　<a href = "javascript:;" id = "next" class = "arrow">&gt;</a>

</div>

样式设定：

#container {width:1024px; height:350px; overflow:hidden; position:relative; margin:0 auto; margin-top:4px;}

#list {width:5120px; height:350px; position:absolute; z-index:1;}

#list img {float:left;}

#buttons {position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:462px;}

#button span {cursor:pointer; float:left; border:1px solid #fff; width:10px; height:10px; border-radius:50%; background:#333; margin-right:5px;}

#buttons .on {background:oranged;}

.arrow {cursor:pointer; display:none; line-height:39px; text-align:39px; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px; background-color:rgba(0,0,0,0.3); color:#fff;}

.arrow:hover {background-color:rgba(0,0,0,0.7);}

#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 animated = false;

　　var timer;

　　function showButton() {

　　　　for (var i = 0; i < buttons.length; i++) {

　　　　　　if (buttons[i].className == ‘on‘) {

　　　　　　　　buttons[i].className = ‘‘;

　　　　　　　　break;

　　　　　　}

　　　　}

　　　　buttons[index - 1].className = ‘on‘;

　　}

　　function animate(offset) {

　　　　animated = true;

　　　　var newLeft = parseInt(list.style.left) + offset;　　

　　　　var time = 300;

　　　　var interval = 30;

　　　　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 {

　　　　　　　　animated = false;

　　　　　　　　list.style.left = newLeft + ‘px‘;

　　　　　　　　if(newLeft > -1024) {

　　　　　　　　　　list.style.left = -3072 + ‘px‘;

　　　　　　　　}

　　　　　　　　if(newLeft < -3072) {

　　　　　　　　　　list.style.left = -1024 + ‘px‘;

　　　　　　　　}

　　　　　　}

　　　　}

　　　　go();

　　}

　　function play() {

　　　　timer = setInterval (function() {

　　　　　　next.onclick();

　　　　},3000);

　　}

　　function stop() {

　　　　clearInterval(timer);

　　}

　　next.onclick = function() {

　　　　if (index == 3) {

　　　　　　index = 1;

　　　　} else {

　　　　　　index += 1;

　　　　}

　　　　showButton();

　　　　if(!animated) {

　　　　　　animated(-1024);

　　　　}

　　}

　　prev.onclick = function () {

　　　　if (index == 1) {

　　　　　　index = 3;

　　　　} else {

　　　　　　index -= 1;

　　　　}

　　　　showButton();

　　　　if (!animated) {

　　　　　　animate (1024);

　　　　}

　　}

　　for (var i = 0; i < buttons.length; i++) {

　　　　buttons[i].onclick = function () {

　　　　　　if (this.className == ‘on‘) {

　　　　　　　　return;

　　　　　　}

　　　　　　var myIndex = parseInt(this.getAttribute(‘index‘));

　　　　　　var offset = -1024 * (myIndex - index);

　　　　　　index = myIndex;

　　　　　　showButton();

　　　　　　if (!animated) {

　　　　　　　　animate(offset);

　　　　　　}

　　　　}

　　}

　　container.onmouseover = stop;

　　container.onmouseout = play;

　　play();

}

焦点轮播图片的实现

标签：

原文地址：http://www.cnblogs.com/applesui/p/4688774.html