轮播图

来源：互联网发布：淘宝商城9.9包邮编辑：程序博客网时间：2024/05/16 01:37

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">*{margin: 0;padding:0;}body{background-color:rgb(0,0,0);}#igs{ margin: 10px auto; width: 700px; height: 350px; position: relative;}    img{width: 700px;}    .ig{    position: absolute;    }    #tabs{    position: absolute;    list-style: none;    background-color: rgba(255,255,255,.5);    left: 300px;    bottom: 10px;    border-radius: 10px;    padding: 5px 0 5px 5px;    }    .tab{    float: left;    text-align: center;    line-height: 20px;    width: 20px;    height: 20px;    cursor: pointer;    overflow: hidden;    margin-right: 4px;    border-radius: 100%;    background-color: rgb(200,100,150);    }.btn{position: absolute;color:#fff;top: 118px;width: 40px;height:100px;background-color: rgba(255,255,255,.3);font-size: 40px;font-weight: bold;text-align: center;line-height: 100px;border-radius: 5px;margin: 0 5px;}.btn2{position:absolute;right: 0px;}.btn:hover{background-color: rgba(0,0,0,0.7);cursor: pointer;}.bg{background-color: red;}</style></head><body>    <div id="igs">  <a href="#"  class="ig"><img src="images\1.jpg" alt="img1"></a><a href="#"  class="ig"><img src="images\2.jpg" alt="img2"></a><a href="#"  class="ig"><img src="images\3.jpg" alt="img3"></a><a href="#"  class="ig"><img src="images\4.jpg" alt="img4"></a><a href="#"  class="ig"><img src="images\5.jpg" alt="img5"></a>      <div class="btn btn1"><</div>      <div class="btn btn2">></div>     <ul id="tabs">        <li class="tab">1</li>        <li class="tab">2</li>        <li class="tab">3</li>        <li class="tab">4</li>        <li class="tab">5</li>     </ul>   </div></body></html><script type="text/javascript">//初始化轮播图var index= 0; //默认第一张的索引var imgs=document.getElementsByClassName('ig');//轮播图片var tabs=document.getElementsByClassName('tab');//按钮var btns=document.getElementsByClassName('btn');//将其他轮播图都隐藏，只显示第一张for(var i= 0;i<imgs.length;i++){// imgs[i].style.display='none';if(index!==i){imgs[i].style.display="none";     }}//将第一个按钮背景变成红色// tabs[index].className='tab bg';//同时设定多个样式tabs[index].classList.add('bg');//追加样式// 自动轮播function carouseal(){//将定时器id返回  return setInterval(function(){   //隐藏图片   imgs[index].style.display='none';   tabs[index].classList.remove('bg');   index++;   //判断是否循环到最后一种   if(index==imgs.length){      index=0;//重新从第一张开始   }   //显示图片   imgs[index].style.display='block';   tabs[index].classList.add('bg');},500);}//调用自动轮播var timer=carouseal()//按钮点击上一张btns[0].onclick=function(){//先关闭自动轮播clearInterval(timer);imgs[index].style.display="none"tabs[index].classList.remove('bg');//如果显示为第一张图片if(index ==0){index=imgs.length;//重新设置为最后一张}index--;imgs[index].style.display="block";tabs[index].classList.add('bg');}btns[1].onclick =function(){   //关闭定时器    clearInterval(timer);    //隐藏图片    imgs[index].style.display="none"tabs[index].classList.remove('bg');index++;//如何显示为最后一张图片if(index ==5){index=0;//重新设置为最后一张}imgs[index].style.display="block";tabs[index].classList.add('bg');    }//点击按钮选择轮播图for(var i=0;i<tabs.length;i++){tabs[i].x=i;//将i的值赋值给tabs[i]的x属性tabs[i].onclick=function(){//清除定时器clearInterval(timer);imgs[index].style.display="none";tabs[index].classList.remove('bg');//显示图片imgs[this.x].style.display="block";tabs[this.x].classList.add('bg');index=this.x}}//隐藏显示图片的函数/*function showImg(i){  //i:需要显示的图片的索引//隐藏图片imgs[index].style.display="none"tabs[index].classList.remove('bg');//显示图片imgs[i].style.display="none"tabs[i].classList.remove('bg');}*///鼠标移动到图片上时,停止自动轮播document.getElementById('igs').onmouseover=function(){clearInterval(timer);//停止自动轮播}//鼠标移出到图片上时,重新开始自动轮播document.getElementById('igs').onmouseleave=function(){// clearInterval(timer);//停止自动轮播timer=carouseal();}</script>

轮播图思路:隐藏显示效果轮播图

1.布局:通过定位将需要轮播的图片定位带同一位置

2.js实现：

1.轮播图初始化：1设定一个当前显示的图片索引

2 隐藏除第一张的所有图片

3 将第一张图片的按钮设置背景

2.自动轮播：通过定时器先隐藏当前图片，再显示下一张图片

问题：当显示到最后一张图片时，当前索引为3时，即已经显示最后一张，如何实现下一张？

先隐藏，然后再显示之前做判断

3.上一张：1.给上一张按钮绑定事件

2 先隐藏当前图片

3.显示当前图片的上一张，即：index-1

问题: 当显示到第一页时，当前索引为1,即已经显示到第一张,如何实现上一张显示最后一张？

解决：先隐藏，然后判断之后再显示

上一张时会与自动轮播冲突：先清除自动轮播（定时器）

4.下一张：同自动轮播（先清除定时器）

5.点击按钮显示对应的图片:1循环给每个按钮绑定事件

2.将按钮当前的索引作为需要显示的索引

3先隐藏

4再显示

6.鼠标移动到图片上时：停止轮播

7.鼠标移开时，自动轮播：1事情：mouseleave

2重新启动定时器:将自动播放开启

阅读全文

0 0