用js写图片轮播效果

用js写图片轮播效果
轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。两种轮播的HTML是一样的结构，只是css和js有一点点区别。

1、先分析页面结构（两种轮播方式都可以用着一个结构）
（1）由两部分组成，一个是轮播所用的图片，另一个是图片右下方的小圆点。
（2）用什么标签，层级结构是什么？当然这个界面比较简单先用一个大的div将图片和圆点都装起来，在用一个ul将图片装起来，圆点用span标签。
这样结构就写好了，再将图片放进去。（当然也可以用其他结构）

<!--图片轮播-->
<div class="big">
    <!--内容部分-->
        <ul class="pic" id="pic">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>
    <!--内容部分 end-->


    <!--点-->
    <div class="dian" id="dian">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!--点 end-->
</div>
<!--图片轮播 end-->

2、结构搭建好了，接下来就是样式了。（左右、上下轮播）
（1）连接样式表

（2）然后写公共样式

/*公共样式*/
*{margin:0 auto; padding:0;}
ul,li,ol{ list-style: none;}
img{border: none;}
/*公共样式*/

（3）写图片的样式，因为用的li标签，li是块级元素，让li标签左浮动，超出的部分隐藏。在设置一下宽高。

/*图片样式*/
.big{ width: 500px; height: 500px; overflow: hidden;position: relative; }
.pic{ width: 3000px;transition:all 0.5s;}
.pic>li{ float: left; width: 500px; height: 500px; overflow: hidden;}
/*图片样式 end*/

（4）点的样式

/*点的样式*/
.dian{height: 20px; right:20px; bottom:20px; position: absolute;}
.dian span{ display: inline-block; width: 20px; height: 20px; background: #666; border-radius: 20px; margin-right: 10px; cursor: pointer;}
.dian .on{background: #ff0;}
/*点的样式 end*/

3、接下来就是js的部分了。其实样式设置好了，js做的很简单，就是通过元素的id获取元素，不断地改变图片元素的位置。并给圆点添加点击的样式。（左右、上下轮播）

{
    /*
  * findSiblings : 找所有的兄弟节点
  * 参数：tag  目标。找目标的所有的兄弟节点
  * 举例：let  xd = findSiblings("xID");
  *       找指定标签的所有兄弟，返回一个数组
  * */
    let findSiblings = function( tag ){
        let parent = tag.parentNode;
        let  childs = parent.children;
        let Sibling = [];  // 用来存储找到的兄弟们。
        for( let i = 0 ; i <= childs.length-1; i++){
            if( childs[i] !== tag ){
                Sibling[ Sibling.length ] = childs[i];
            }
        }
        return Sibling;
    };

    let d = document.getElementById('dian');
    let p = document.getElementById('pic');
    let lis = d.children;
    for(let i = 0;i < lis.length;i++){
        lis[i].addEventListener('click',function () {//添加点击监听事件
            console.info(i);
            //p.style.marginLeft = "-"+ 1200*i +"px";//左右轮播
            p.style.marginTop = "-"+ 500 * i +"px";//上下轮播
            lis[i].className = 'on';
            let liSibing = findSiblings(this);
            for (let j = 0 ;j<liSibing.length;j++){
                liSibing[j].className = "";
            }
        });

    }
}

4、渐变轮播的css样式

/*公共样式*/
*{margin:0 auto; padding:0;}
ul,li,ol{ list-style: none;}
img{border: none;}
/*公共样式*/

/*图片样式*/
.big{ width: 1200px;height: 500px;position: relative; }
.pic{ transition:all 0.5s;}
.pic>li{width: 1200px; height: 500px; display: none;overflow: hidden; /* 内容超出隐藏 */position: absolute;  /*绝对定位，相互覆盖*/}
.pic > .showLi{display: block; animation: myAni  1s  both;}
@keyframes  myAni { 0%{opacity: 0;} 100%{opacity: 1;} }
/*图片样式 end*/

/*图标样式*/
.dian{height: 81px; right:38px; bottom:20px; position: absolute;}
.dian div{width: 81px; height: 81px;float: left; margin-right: 20px; cursor: pointer; border: 5px solid transparent;}
.dian .on{border: #fff solid 5px; border-radius: 5px;}
/*图标样式 end*/

5、渐变轮播的js样式

{

let dots = document.getElementById('small');
let picUl = document.getElementById("big");
let lis = picUl.children ;
let span = dots.children;
let Index = 0;
/*
* findSiblings : 找所有的兄弟节点
* 参数：tag  目标。找目标的所有的兄弟节点
* 举例：let  xd = findSiblings("xID");
*       找指定标签的所有兄弟，返回一个数组
* */
let findSiblings = function( tag ){
    let parent = tag.parentNode;
    let  childs = parent.children;
    let Sibling = [];  // 用来存储找到的兄弟们。
    for( let i = 0 ; i <= childs.length-1; i++){
        if( childs[i] !== tag ){
            Sibling[ Sibling.length ] = childs[i];
        }
    }
    return Sibling;
};


/*
* lunboFun : 轮播函数
* 功能：实现图片的滚动轮播；
* 参数：d  点所在的div id
*      p   图片所在的 ul  id
* 示例： lunboFun( "dotsId","ulId");
* 作者：XXX
* 时间：2019-3-26 v1
* */
let lunboFun = function(d,p){
    let dots = document.getElementById(d);
    let picUl = document.getElementById(p);
    let lis = picUl.children ;
    let span = dots.children;
    for(let i=0 ; i <= lis.length-1 ; i++){
        span[i].addEventListener("click",function(){
            console.info(i);  // 索引
            //picUl.style.marginLeft = "-"+ 1200 * i +"px";
            lis[i].className = 'showLi';
            let lxd = findSiblings( lis[i] );
            for(let j = 0 ; j <=lxd.length-1 ; j++){
                lxd[j].className = "";
            }

            // 点的变化
            this.className = "on";
            let sxd = findSiblings( this );
            for(let j = 0 ; j <=sxd.length-1 ; j++){
                sxd[j].className = "";
            }
            console.info( sxd );
        });

    }// end for
};
lunboFun("dian","pic");

//实现图片自动播放
function toright() {
//已经是最后一张图（与第一张相同） 应下一次显示第二张
if(Index === lis.length){
picUl.style.left = “0px”;
Index = 0;
}
picUl.style.marginLeft = “-”+ 1200 * Index +“px”;
span[Index].className = “on”;
let xd = findSiblings( span[Index] );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = “”;
}
Index++;
console.info(Index);
}

let setAuto;
function auto(){
    setAuto = setInterval(function () {
    toright();
},1000);}
auto();
picUl.addEventListener('mouseenter',function () {
    clearInterval(setAuto);
});
picUl.addEventListener('mouseleave',function () {
    auto();
});
}

6、这样就完成了两种轮播方式，但是不足的是还不能让图片自动播放，等待后续学习后，在实现。