2018-10-25

96
六毛半
2018.10.26 23:00* 字数 1096

轮播的实现

看了网上很多轮播实现的例子,自己简单理了理。

整体思路是,写一个盒子设置成一张轮播图的高度和宽度,设置overflow属性值为hidden,即溢出部分直接屏蔽掉

把图片设置成一定的高度和宽度,利用float属性将图片并排在一排,通过移动该大盒子,完成图片的切换。

如图所示,

html主体部分:

<div class="box">/*这是最外面的边框*/

    <div id="pai">/*移动的实际上是这个*/

        <ul>

            <li><img src="img/1367482836394.jpg" alt=""/></li>

            <li><img src="img/1370512282166.jpg" alt=""/></li>

            <li><img src="img/1373337078811.jpg" alt=""/></li>

            <li><img src="img/20131227141118_VPjfy.jpeg" alt=""/></li>

            <li><img src="img/1367482836394.jpg" alt=""/></li>

        </ul>

        <div class="square">/*右下角的数字小圆点*/

            <span class="current">1</span>/*current来设置样式*/

            <span>2</span>

            <span>3</span>

            <span>4</span>

        </div>

        <div class="zuoyou">/*这两个是控制图片左右切换的两个手动点击按钮*/

            <span id="left"><</span>

            <span id="right">></span>

        </div>

    </div>

</div>

CSS部分:


*{

            margin:0;

            padding:0;

        }/*全选择器,把margin,padding置为零*/

        img{

        width:490px ;

        height: 327px;

        }/*把图片宽高设置与pai(即装图片的盒子)一致,以免溢出的部分被遮住*/

        .box{

            width: 490px;

            height: 327px;

            padding: 5px;

            border: 1px solid #cccccc;

            margin: 200px auto;

        }/*设置最外层边框的样式*/

        #pai {

            width: 490px;

            height: 327px;

            position: relative;

            overflow: hidden;/*溢出处理,直接隐藏*/

        }

        ul{

            list-style: none;/*把前面的小点点去掉*/

            width: 500%;

            position: absolute;

            left:0px;

        }

        li{

            float: left;/*将图片并排*/

        }

        .square {

            position: absolute;

            bottom: 10px;

            right: 10px;

        }

        span {

            display: inline-block;

            width: 16px;

            height: 16px;

            background-color: #fff;

            text-align: center;

            margin: 3px;

            border: 1px solid #ccc;

            line-height: 16px;

            border-radius: 8px;

            cursor: pointer;

        }

        .current {

            background-color: darkorange;

            color: #fff;

        }/*切换时的样式*/

        .box #pai img{

            width: 490px;

        }

        .zuoyou{

            width: 490px;

            height: 80px;

            position: absolute;

            top: 150px;

            left:0;

            color: #1bb52b;

            display: none;/*未移入是隐藏*/

}

        .zuoyou #left{

            width: 40px;

            height: 30px;

            text-align: center;

            float:left;

            font: 30px/30px "simsun";/*字号 行高 字体*/

            border-radius: 10px;

            background-color: rgba(0,0,0,0.8);

        }

        .zuoyou #right{

            width: 40px;

            height: 30px;

            text-align: center;

            float:right;

            font: 30px/30px "simsun";

            border-radius: 10px;

            background-color: rgba(0,0,0,0.8);

        }

JS部分:

window.onload=function () {

    var pai =document.getElementById("pai");

    var ul=pai.children[0];/*获取无序表*/

    var spanArr=pai.children[1].children;/*获取右下角的数标,这是一个类数组*/

    var imgWidth=pai.offsetWidth;/*获取图的可见宽度*/

    var zuoyou=pai.children[2];/*获取控制左右的大标签*/

    var Left =zuoyou.children[0];/*左*/                       

    var Right =zuoyou.children[1];/*右*/

    var spanIndex= 0;

    var imgIndex=0;

    var timer1=setInterval(autoPlay,3000);

  function autoPlay() {

      spanIndex++;

                if(spanIndex>spanArr.length-1){

                    spanIndex=0;

                }/*当自动播放时,到最后一个时,又重新开始*/

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

                    spanArr[i].className="";

                }

                spanArr[spanIndex].className="current";/*该点的样式为current*/


                imgIndex++;

                if(imgIndex>spanArr.length){

                    ul.style.left= 0;

                    imgIndex = 1;

                }

                animate(ul,-imgWidth*imgIndex);

            }   

            pai.onmouseover =function () {  /*鼠标放在pai上清除大的定时器*/

                clearInterval(timer1);

                zuoyou.style.display="block";

            }

            pai.onmouseout =function () { /*鼠标移开pai  加上定时器*/

                timer1=setInterval(autoPlay,1000);

                zuoyou.style.display="none";

            }

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

                spanArr[i].index=i;

                spanArr[i].onmouseover=function () {

                  clearInterval(timer1);

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

                      spanArr[j].className="";

                    }

                    this.className="current";

                    spanIndex = imgIndex= this.index;

                    animate(ul,-imgWidth*this.index);

                }

            }

          Left.onclick =function () {

              spanIndex--;

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

                  spanArr[i].className="";

              }

              if(spanIndex<0){

                  spanIndex=spanArr.length-1;

              }

              spanArr[spanIndex].className="current";

                imgIndex--;

              if(imgIndex<0){

                  /*先移动到最后一张,然后imgindex的值取之前一张的索引值,然后在向前移动*/

                  ul.style.left = -imgWidth*(spanArr.length)+"px";

                  imgIndex = spanArr.length-1;

              }

              animate(ul,-imgIndex*imgWidth);

          }

          Right.onclick =function () {

              autoPlay();

          }


/*动画*/

function animate(ele,target) {

                clearInterval(ele.timer);/*清除定时器*/

                var step=target>ele.offsetLeft?10:-10;

                ele.timer=setInterval(function () {

                    ele.style.left=ele.offsetLeft+step+"px";

                    var delta=target-ele.offsetLeft;

                    if(Math.abs(delta)<=Math.abs(step)){

                        ele.style.left=target+"px";

                        clearInterval(ele.timer);

                    }

                },10)

            }

        }

JS相关