轮播图总结

classname方法:css,html部分ul包裹5个li超出部分隐藏。2个div作为按钮定位上去。给第一张图片添加一个有display:block的属性名,然后给其他图片添加display:none的属性名。var一个全局信号量初始值0; 鼠标点击事件的时候++或者--,然后加上判断<0的时候信号量为4,>4的时候信号量为0,然后遍历所有的图片下标为[i],鼠标点击的时候让下标[i]的所有图片的classname名空。然后把下标为信号量的classname修改为有display:block的属性名;

***
var leftbtn = document.getElementsByTagName("div")[0];

var rightbtn = document.getElementsByTagName("div")[1];

var img = document.getElementById("tu").getElementsByTagName("li");
var index = 0 ;

leftbtn.onclick = function(){

index--;

if(index<0){

index=4;

}
for(var i = 0 ; i<img.length; i++){
    img[i].className=" ";

   img[index].className="xianshi";

   }

}
rightbtn.onclick = function(){

index++;

if(index>4){

index=0;

}

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

img[i].className=" ";
img[index].className="xianshi";

 }

}
***

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • classname方法:css,html部分ul包裹5个li超出部分隐藏。2个div作为按钮定位上去。给第一张图片...
    qzuser_8165阅读 284评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,816评论 0 8
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,923评论 0 1
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
    love2013阅读 1,330评论 0 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,932评论 2 17