<script type="text/javascript">
//获取当前图片的下标
var num = 0;
//获得图片的一串数组元素
var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");
//获取li的数组元素
var li = document.getElementsByClassName("item");
var banner = document.getElementsByClassName("banner")[0];
//进行图片轮播的一个方法
function bannerAuto(adress){
//使当前所有的图片的层级为0并且Li的背景颜色设置为#FFF
for(var i = 0; i<Img.length;i++){
Img[i].style.zIndex="0";
li[i].style.background="#fff";
};
//使当前下标的图片的层级为1,并且当前li的背景颜色设置为pink
Img[num].style.zIndex="1";
li[num].style.background="pink";
//使num下标进行累计
if(adress=="right"){
num++;
if(num>=Img.length){
num=0;
}
//当num大于等于图片数组元素长度时,归零
}else if(adress == "left")
num --;
if(num<0){
num=Img.length-1;
}
}
//每隔2秒执行一次轮播方法
var move=setInterval(function(){
bannerAuto("right")},2000);
//点击事件
for(var i=0; i<li.length;i++){
//获取当前的选中的Li
li[i].index = i;
//设置每个Li的点击效果事件-
li[i].function(){
for(var j =0; j<Img.length;j++){
Img[j].style.zIndex="0";
li[j].style.background="#fff";
};
this.style.background="pink";
Img[this.index].style.zIndex="1";
num=this.index;//关联点击的下标和num值,也就是自动轮播的下标
}
};
banner.function(){
clearInterval(move);
}
banner.function(){
move=setInterval(function(){
bannerAuto("right");
},2000)
};
left.function(){
bannerAuto("left")
}
right.function(){
bannerAuto("right")
}
</script>
</html>
用js写轮播图
猜你喜欢
转载自blog.csdn.net/ASLlife/article/details/89320856
今日推荐
周排行