轮播图

来源：互联网发布：linux启动tomcat报错编辑：程序博客网时间：2024/05/18 00:27

先说一下轮播图的原理：首先先清除所有的padding：0；margin：0；清除边距设置两个div，在最里面放img，img以横向排列，可以用float：left；对里第二个div的宽度设置为所有img的宽度总和，对第一个div的宽度为一个img的宽度，高度为img高度，最重要的是要加overflow：hidden；然后就是对第二个div进行相对于第一个div的定位，设置left来实现在第一个div内的左右移动，这就是基本原理了，当然还有一种是将所有的img叠加在一起，实现多层，然后用js对img进行透明度的变换。

好，先看一段代码，具体介绍：

<!DOCTYPEHTML><html><head><mate charset="utf-8"><style><body><div id="slide"><ul class="slide_img" id="con" style="left:-800px;" >  <li><a href="javascript:;"><img src="./images/5.jpg"></a></li>//实现无限滚动，防止有空隙  <li><a href="javascript:;"><img src="./images/1.jpg"></a></li>  <li><a href="javascript:;"><img src="./images/2.jpg"></a></li>  <li><a href="javascript:;"><img src="./images/3.jpg"></a></li>  <li><a href="javascript:;"><img src="./images/4.jpg"></a></li>  <li><a href="javascript:;"><img src="./images/5.jpg"></a></li>  <li><a href="javascript:;"><img src="./images/1.jpg"></a></li>//实现无限滚动，防止有空隙</ul>    <div class="number" id="number">//多个带颜色的小框        <a index="1" class="on" href="javascript:;"></a>        <a index="2" href="javascript:;"></a>        <a index="3" href="javascript:;"></a>        <a index="4" href="javascript:;"></a>        <a index="5" href="javascript:;"></a>    </div>    <a href="javascript:;" id="prev" class="arrow"><</a>//向前的标志按钮    <a href="javascript:;" id="next" class="arrow">></a>//向后的标志按钮</div></body></html>

css的部分

body,ul{  margin: 0; padding: 0;}/*清除边距*/#slide{   width: 800px;   height: 450px;   margin-top:100px;   margin-left:300px;   overflow: hidden;   position: relative;}/*对div设置高，宽（即可视区域），为ul设置绝对定位的定位对象*/.slide_img{   width: 5600px;   height: 100%;   position: absolute;   top: 0px;}/*设置总宽，以div为定位点，做绝对定位*/.slide_img li{   list-style: none;   float: left;}/*去li的点，向左对齐，形成一行排列*/.slide_img img{    width: 800px;   height: 100%;}/*设置图片宽高*/.number{    width: 100%;    text-align:center;    position: absolute;    left: 0;    bottom: 80px;}.number a{    display: inline-block;    width: 20px;    background-color: #fff;    height: 6px;    overflow: hidden;}.number a.on{    background-color:#f60;}.arrow {   cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 200px; background-color: RGBA(0,0,0,.3); color: #fff;text-decoration: none;}.arrow:hover { background-color: RGBA(0,0,0,.7);  text-decoration: none;}/*改透明度，去掉下划线*/  #slide:hover .arrow { display: block;}/*当鼠标移到图片上显示左右按钮*/#prev { left: 50px;}#next { right: 50px;}/*左右的按钮的位置*/

js行为部分，参考慕课网，对left的操作

var slide=document.getElementById("slide");//获取id为slide对象var con=document.getElementById("con");//获取id为con的对象var number=document.getElementById("number").getElementsByTagName("a");//获取id为number下的标签a数组var prev=document.getElementById("prev");//获取id为prevvar next=document.getElementById("next");//获取id为nextcon.style.position="absolute";var animated=false;//animated对象初始化为falsevar timer;   var index=1;   function showbutton(){    for(var i=0;i<number.length;i++ ){              //遍历数组               if(number[i].className=="on"){    number[i].className="";    break;    }//将有on类的清除为空    }   number[index-1].className="on";//对鼠标移上的小框设置on类   }  function play(){      //自动滚动     timer=setInterval(function(){  next.onclick();  },3000);  }  function stop(){          //清除计时器，停止滚动           clearInterval(timer);  }  function animate(offset){          //滚动过程的速度       animated=true;  var newlist=parseInt(con.style.left)+offset;  var time=300;  var interval=10;  var speed=offset/(time/interval);  function go(){  if((speed<0&&parseInt(con.style.left)>newlist)||(speed>0&&parseInt(con.style.left)<newlist)){  con.style.left=parseInt(con.style.left)+speed+"px";  setTimeout(go,interval);  }else{  animated=false;  con.style.left=newlist+"px";        if(newlist> -800){             //当图片向前滚动到顶时，变回最后的图片            con.style.left= -4000+"px";        }        if(newlist< -4000){                  //当图片向后滚动到底时，变回第一张               con.style.left= -800+"px";  }  }    }  go();//初始调用  }//点击按钮效果 next.onclick=function(){       if(!animated){    if(index==5){    index=1;    }else{index+=1;}      showbutton();animate(-800);}}    prev.onclick=function(){    if(!animated){    if(index==1){    index=5;    }else{index-=1;}      showbutton();     animate(800);    }}//当鼠标移到小框时，的效果 for(var i=0;i<number.length;i++){number[i].onmouseover=function(){var myIndex=parseInt(this.getAttribute("index"));//获取自定义属性indexvar offset=-800*(myIndex-index);if(!animated){animate(offset);index=myIndex;showbutton();}}} slide.onmouseover = stop; slide.onmouseout = play;play(); }</script>

0 0