怎么设置图片自动轮播

liushuaihang 2017-10-12 10:04:34
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 "></div>
</a>
<a href="">
<div class="banner-slide slide2 "></div>
</a>
<a href="">
<div class="banner-slide slide3 slide-active"></div>
</a>

</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots" id="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>



<script type="text/javascript">
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;

}
var index=0,
timer=null,
pics=byId("banner").getElementsByTagName("div"),
dots=byId("dots").getElementsByTagName("span"),
len=pics.length,
menu=byId("menu-content"),
subMenu=byId("sub-menu"),

prev=byId("prev"),
next=byId("next"),
innerBox=subMenu.getElementsByClassName("inner-box"),
menuItems=menu.getElementsByClassName("menu-item");


function slideImg(){
var main=byId("main");
main.onmouseover=function(){

if(timer) clearInterval(timer);

}



for(var d=0;d<len;d++){

dots[d].id=d;
dots[d].onclick=function(){

index=this.id;

changeImg();
}

}


next.onclick=function(){
index++;
if(index>=len) index=0;
changeImg();
}

prev.onclick=function(){
index--;
if(index<0) index=len-1;
changeImg();
}

//daohang

for(var m=0;m<menuItems.length;m++){

menuItems[m].setAttribute("data-index",m);



menuItems[m].onmouseover=function(){
subMenu.className='sub-menu';

var idx = this.getAttribute("data-index");

for(var j=0;j<innerBox.length;j++){

innerBox[j].style.display='none';
menuItems[j].style.background='none';
}

//console.log(idx);
menuItems[idx].style.background='rgba(0,0,0,0.2)';
innerBox[idx].style.display='block';

}
}

menu.onmouseout=function(){
subMenu.className="sub-menu hide";

}

subMenu.onmouseover=function(){
this.className="sub-menu";

}


}

//tupian
function changeImg(){

for(var i=0;i<len;i++){
pics[i].style.display="none";
dots[i].className="";
}


pics[index].style.display="block";
dots[index].className="active";
}
slideImg();

</script>

...全文
591 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
冰久 2017-10-12
  • 打赏
  • 举报
回复
提一个建议,以后上传问题的时候建议只上传问题代码,而不是把所有的js一并上传。
冰久 2017-10-12
  • 打赏
  • 举报
回复
timer = setInterval(function(){ index++ for(var j=0; j<len; j++){ pics[j].style.display="none"; } if(index>len-1){ index=0 } pics[index].style.display="block"; },1000) 我也是刚刚开始学习
clark_kidd 2017-10-12
  • 打赏
  • 举报
回复
你贴的代码无法运行。如果你是项目目的而不是学习目的,建议你用插件 http://www.swiper.com.cn/
never_66 2017-10-12
  • 打赏
  • 举报
回复
设置图片自动轮播,先有图片,定义一个方法,方法定义切换图片,定时器,每多少秒执行一次,就实现了.思路给你了。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧