JavaScript实现大图轮播效果

前端之家收集整理的这篇文章主要介绍了JavaScript实现大图轮播效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下

大图轮播

@H_404_21@
<script type="text/javascript">
var rightBtn = document.getElementById("right-btn");
var leftBtn = document.getElementById("left-btn");
var n = 1;
/ var count = 1/;
var arr = new Array();
/ var m=1;
/ rightBtn.onclick = function() {
var x = window.setInterval("to_right()",20);
arr.push(x);
}

function clear() {
for(var i in arr) {
window.clearInterval(arr[i]);
}
}

function to_right() {

var adContainer = document.getElementById("ad-container");
if(n == 5) {
clear();
} else if(adContainer.offsetLeft != n * (-500)) {
adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
} else {
n++;
clear();
}
}
var arr1 = new Array();

leftBtn.onclick = function() {
var y = window.setInterval("to_left()",20);
arr1.push(y);
}

function clear2() {
for(var y in arr1) {
window.clearInterval(arr1[y]);
}
}

function to_left() {

var adContainer = document.getElementById("ad-container");
if(n == 1) {
clear2();
} else if(adContainer.offsetLeft != (n-2) * (-500)) {
adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
} else {
n--;
clear2();
}
}

精彩专题分享

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章