JS11---javascript实现轮播图

一.淡入淡出

HTML内容

<style>
    .a{
        width: 400px;
        height: 300px;
        margin: auto;
        position: relative;
    }
    .imglist{
        width: 400px;
        height: 300px;
        position: absolute;
        opacity: 0;
        transition: opacity .5s ease-in-out;
    }
    .a>div>img{
        width: 100%;
        height: 100%;
    }
    .b{
        position: absolute;
        top: 260px;
        left: 115px;
        z-index: 11;
    }
    .b>div{
        width: 20px;
        height: 20px;
        border: solid 2px #f5f2f0;
        display: inline-block;
    }
    .c div{
        position: absolute;
        width: 20px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        text-align: center;
        color: white;
        background-color: black;
    }
    .c>div:first-child{
        left: 0;
        top: 135px;
        z-index: 11;
        border-radius: 0 50% 50% 0; /* 顺时针1234*/
    }
    .c>div:last-child{
        left: 380px;
        top: 135px;
        z-index: 11;
        border-radius: 50% 0 0 50%;
    }
</style>
</head>
<div class="a">
<div class="imglist"><img src="imges/1.jpg" alt=""/></div>
<div class="imglist"><img src="imges/2.jpg" alt=""/></div>
<div class="imglist"><img src="imges/3.jpg" alt=""/></div>
<div class="imglist"><img src="imges/4.jpg" alt=""/></div>
<div class="imglist"><img src="imges/5.jpg" alt=""/></div>
<div class="imglist"><img src="imges/6.jpg" alt=""/></div>
<div class="b">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="c">
    <div><</div>
    <div>></div>
</div>

js内容

<script>
//无论什么都写在函数里边
/*
* 1.让图片轮播起来
*   ①设置层的情况
*   ②写层的动画     //将当前的zindex记录下来，每次每个层都在加一   但5+1=0；
*   ③调整透明度    //让最高层的opcity为0；即将变为最高层（zindex++之后值为5）的opcity为1；
* 2.写圈圈动画
*   ①圈圈随着照片动（默认第一个有颜色）  写一个颜色方法，找到最高层的index
*   ②鼠标进入和离开 （点 点出现对应的图片这一步骤前，先清除计时器）
*   ③给点添加事件
*   ④当前点变色，显示对应的图片   和三维动画一样，让转几次
* 3.写左右按键事件
*   左点击事件方法  第一种我写的
*   第二种老师写的：写反动画  我们写的是正动画  （反动画以后再尝试）
* */
var aele=document.getElementsByClassName("a")[0];
var lists=document.getElementsByClassName("imglist");
var left=document.getElementsByClassName("c")[0].children[0];
var right=document.getElementsByClassName("c")[0].children[1];
var cricle=document.getElementsByClassName("b")[0].children;
lists[0].style.opacity=1; //其余为透明，第一张为不透明，加transition动画
cricle[0].style.backgroundColor="red";

var timer=null;
var speed=1500;
var index=0; //索引
var num=0;

function ceng(){
    for(var i=0;i<lists.length;i++){
        lists[i].style.zIndex=lists.length-i-1;
    }
}
  function show(){
    timer=setInterval(function(){
        animate(1); // 常规调用一次
        color();
    },speed)
}
function animate(count){
    for(var k=0;k<count;k++){        //将当前方法执行count次，控制动画执行的次数（利用形参）
        for(var i=0;i<lists.length;i++){
            var zindex=parseInt(lists[i].style.zIndex);

                zindex++;
                if(zindex>=lists.length){      //最高层进这里边
                    //当前最高层的透明度为0； zindex++之后值为5（即将变为最高层）的那一层的透明度为1
                    lists[i].style.opacity=0;
                    zindex=0;
                }            //将当前的zindex记录下来，每次每个层都在加一   但5+1=0；
                if(zindex==lists.length-1) {
                    lists[i].style.opacity = 1;
                    index = i;     //最高层的index，索引的对应问题
                }
                lists[i].style.zIndex=zindex;
        }
        //动态修改index的值    最上边那一层，zindex为5，opcity为1；
    }
}

//点颜色的相关操作
function color(){
    for(var i=0;i<cricle.length;i++){
        if(i==index){
            cricle[i].style.backgroundColor="red";
        }
        else{
            cricle[i].style.backgroundColor="";
        }
    }
}

//点击左右事件
function zuoyou(){
    left.onclick=function(){  //左边事件
        count=lists.length-1;  //3.的第一种方法  3.的第二种方法，写反动画
        animate(count);
        color();
    };
    right.onclick=function(){
        animate(1);   //右边事件常规调用一次
        color();
    };
}

//停止与开始计时器
function stop(){
    aele.onmouseenter=function(){
        clearInterval(timer);
    }
    aele.onmouseleave=function(){
        show();
    }
}
//给点添加事件
function dian(){
    for(var i=0;i<cricle.length;i++){
        cricle[i].index=i;   //获取当前的索引
        cricle[i].onmouseenter=function(){
            var count=this.index-index>0?this.index-index:cricle.length+this.index-index;
             //当前的索引减去之前的索引  正值：值为多少转几圈   负值：
            console.log(count);  //测试count值可以得出count大于0和小于0转的不同圈数
            index=this.index;   //this.index 为 i
            color();
            animate(count);  //执行count次
            //2④的第一种方法  利用函数的递归
          /*  if(count>0){
                loop();
                function loop(){
                    num++;
                    animate();     //转多少圈用的是循环计时器里边的函数方法，将函数方法分装出来；
                    if(num>=count){
                        clearTimeout(timer2);
                        return;
                    }
                    var timer2=setTimeout(loop(),1500);
                }
            }*/
        }
    }
}

window.onload=function(){
    show();
    ceng();
    color();
    stop();
    dian();
    zuoyou();
}

二.横向滚动

HTML内容

<style>
    .a{
        height: 300px;
        width: 400px;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: auto;
        position: relative;
    }
    .b{
        width: 2800px;
        height: 300px;
    }
    .b>div{
        height: 300px;
        width: 400px;
        float: left;
    }
    .b>div>img{
        width: 100%;
        height: 100%;
    }
    .c{
        position: absolute;
        top: 270px;
        left: 120px;
    }
    .c>div{
        width: 15px;
        height: 15px;
        border: solid 3px #e4e4e4;
        border-radius: 50%;
        display: inline-block;
    }
    .span>div{
        position: absolute;
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 20px;
        background: blanchedalmond;
        cursor: pointer;
    }
    .span>div:first-of-type{
        left: 0;
        top:125px;
    }
    .span>div:last-of-type{
        left: 380px;
        top:125px;
    }
    .trans{
        transition: margin-left .5s ease-in;
    }
</style>
</head>
<div class="a">
<div class="b trans">
    <div><img src="imges/1.jpg" alt=""/></div>
    <div><img src="imges/2.jpg" alt=""/></div>
    <div><img src="imges/3.jpg" alt=""/></div>
    <div><img src="imges/4.jpg" alt=""/></div>
    <div><img src="imges/5.jpg" alt=""/></div>
    <div><img src="imges/6.jpg" alt=""/></div>
    <div><img src="imges/1.jpg" alt=""/></div>
</div>
<div class="c">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="span">
    <div><</div>
    <div>></div>
</div>

js内容

<script>
    /*
    * 1.画页面
    * 2.动画   出现闪的情况，用一次性计时器
    * 3.画点
    * 4.鼠标事件
    * 5.点对应相应的图片
    * 6.左右点击事件
    * */
    var left=document.getElementsByClassName("span")[0].children[0];
    var right=document.getElementsByClassName("span")[0].children[1];
    var cricle=document.getElementsByClassName("c")[0].children;
    var b=document.getElementsByClassName("b")[0];
    var a=document.getElementsByClassName("a")[0];

    var timer=null;
    var speed=1500;
    var count=0;
    var index=0;

    function animate(){
        timer=setInterval(function(){
            donghua();
        },speed)
    }
    function donghua(){
        b.className="b trans";
        count++;
        b.style.marginLeft=-400*count+"px";   //相应的count值对应相应索引的图片
        //marginLeft为-400 图片便往前走400px
        setTimeout(function(){   //出现那种闪的情况，利用一次性计时器
            if(count >= b.children.length-1){
                b.className="b";
                count=0;
                b.style.marginLeft="0px";
            }
            //console.log(count);
            index=count;  //发现count就是索引值
            addcolor();
        },500)
    }

    //画点
    cricle[0].style.backgroundColor="red";
    function addcolor(){
        for(var i=0;i< cricle.length;i++){
            cricle[i].style.backgroundColor="";
        }
        cricle[index].style.backgroundColor="red";
    }

    //点对应相应的图片
    function yuan(){
        for(var i=0;i<cricle.length;i++){
            cricle[i].index=i;
            cricle[i].onmouseenter=function(){
                index=this.index;
                //console.log(index); //index为当前点所对的索引
                addcolor();
                count=this.index-1;
                donghua();
            }
        }
    }
    //右点击
    right.onclick=function(){
        donghua();
    }
    //左点击
    left.onclick=function(){
        count--;
        console.log(count);
        if(count<0){
            b.className="b";
            b.style.marginLeft=-2400+"px";   //先将第7张图片放过去
            setTimeout(function(){
                b.className="b trans";
                count= 5;
                index=count;
                addcolor();
                b.style.marginLeft=(-400*count)+"px";  //第6张图片   第六张图片往左拖
            },0)
        }
        else{  //必须加else  否则又会重新添上动画   没有加else这些代码都会执行，类又会被加上
            b.className="b trans";
            index=count;
            b.style.marginLeft=(-400*count)+"px";
            addcolor();
        }


       /*这样写会有闪的情况   用一次性计时器写解决这个问题
        count--;
        if(count<0){
            count=5;
        }
        console.log(count);
        index=count;
        b.style.marginLeft=-400*count+"px";
        addcolor();*/
    }

    //鼠标事件
    a.onmouseenter=function(){
        clearInterval(timer);
    }
    a.onmouseleave=function(){
        animate();
    }
    window.onload=function(){
        animate();
        yuan();
    }

</script>

三.三维轮播

HTML内容

    <style>
        body{
            background-color: #222222;
        }
      .a{
          width: 1000px;
          height: 400px;
          border: solid 2px white;
          margin: auto;
          position: relative;
          box-shadow: 0 0 3px 1px #fffdef; /*水平  上下 模糊距离  阴影程度 颜色*/
      }
      .b{
          position: absolute;
          top:420px;
          left: 390px;

      }
        .b>div{
            width: 20px;
            height: 20px;
            border: solid 3px white;
            display: inline-block;
            margin-left: 10px;
            transform: rotate(45deg);
        }
        .imglist{
            width: 400px;
            position: absolute;
            box-shadow: 0 0 15px #eae8da; /*水平  上下 模糊距离  阴影程度 颜色*/
            height: 200px;
            transition: all .1s linear;  /*加动画  动画时间和一次性计时器时间要统一*/
        }
        .imglist>img{
           width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="imglist" style="left: 300px; top:199px; z-index: 5"><img src="imges/1.jpg" alt=""/></div>
    <div class="imglist" style="left: 0px; top:100px; z-index:4"><img src="imges/2.jpg" alt=""/></div>
    <div class="imglist" style="left: 0px; top:50px; z-index: 3"><img src="imges/3.jpg" alt=""/></div>
    <div class="imglist" style="left: 300px; top:0px; z-index: 2"><img src="imges/4.jpg" alt=""/></div>
    <div class="imglist" style="left: 600px; top:50px;z-index: 3 "><img src="imges/5.jpg" alt=""/></div>
    <div class="imglist" style="left: 600px; top:100px;z-index: 4 "><img src="imges/6.jpg" alt=""/></div>
</div>

js内容

<script>
    //1.网页加载完成，默认转动
    //2.鼠标进入清除计时器 鼠标出去重启计时器
    //3.画点的动画 ①点对应图片变色 ②进入点，清空计时器，点变色，出现对应的图片
    //4.让图片转完一圈再转下一圈(在圈中晃动太快的bug)

    var lists=document.getElementsByClassName("imglist");
    var dian=document.getElementsByClassName("b")[0].children;
    var speed=1500;
    var timer=null;
    var index=0;  //记录 正面图的索引
    var count=0; //记录转圈的次数
    var finishCircle=true;//记录动画状态   默认boolen值

    function showanimate(){
        timer=setInterval(function(){
            animate();
            span();
        },speed)
    }
    function animate(){
            var ele=[lists[0].style.left,lists[0].style.top,lists[0].style.zIndex];
            for(var i=0;i<lists.length;i++) {
                if (i < lists.length - 1) {
                    lists[i].style.left = lists[i + 1].style.left;//将后一个的位置给前一个
                    lists[i].style.top = lists[i + 1].style.top;
                    lists[i].style.zIndex = lists[i + 1].style.zIndex;
                }
                else {  //到i=5的时候拿第0个，但是第一张图片的位置在不停变化，第0个的位置是固定的，一开始就用数组接受
                    //若直接拿，得到的是变化后的位置，我们需要拿拿第0个变化前的位置
                    lists[i].style.left = ele[0];//将后一个的位置给前一个
                    lists[i].style.top = ele[1];
                    lists[i].style.zIndex = ele[2];
                }
                if(lists[i].style.zIndex==5){
                    index=i; //获取最前边图片的索引
                }
            }

    }
    //让点跟着图片变化
    function span(){
        for(var i=0;i<dian.length;i++){
            //当前正面那张图变色   将正面图索引记下来
            if(i==index){   //index 最前边那张图片的索引
                dian[i].style.backgroundColor="green";
            }
            else{
                dian[i].style.backgroundColor="";
            }
        }
    }

    //进入点，清空计时器，点变色，出现对应的图片
    //放上点对应的图片展示到第一个（转圈圈）
    function spanMouseEnter() {
        for (var i = 0; i < dian.length; i++) {
            dian[i].index=i;
            dian[i].onmouseenter = function () {
                clearInterval(timer);
                if (finishCircle==true) {
                    finishCircle = false;  //未改变值的话，就一直为true；
                }
                else {
                    return;
                }
                for (var i = 0; i < dian.length; i++) {
                    dian[i].style.backgroundColor="";
                }
                this.style.backgroundColor="green";
                count=this.index-index;
                if(count>0){
                    count=dian.length-this.index+index;
                }
                else{
                    count=index-this.index;
                }
                var num = 0;
                loop();
                function loop() {
                    num++;  //点对应相应的图片，旋转count次，用函数的递归，注意跳出；
                    if (num > count) {
                         finishCircle = true;//动画完成  只有一个动画完成，才可以执行下一个
                         return;
                    }
                    animate();
                    setTimeout(loop, 100);  //动画时间和一次性计时器时间要统一
                    // 要是动画时间长，计时器完了，动画还没完，图片会从动画半中腰开始执行下一个计时器
                }
            }
            dian[i].onmouseleave = function () {
                showanimate();
            }
        }
    }
/* 转的圈数
 count=this.index-index;
    if(count>0){
        count=dian.length-this.index+index;
    }
    else{
        count=index-this.index;
    }*/
    function MouseEnter(){
        for(var i=0;i<lists.length;i++){
            //鼠标进入停止
            lists[i].onmouseenter=function(){
                clearInterval(timer);
            };
            //鼠标出去重启计时器
            lists[i].onmouseleave=function(){
                showanimate();
            }
        }
    }
        window.onload=function(){
        showanimate();
        MouseEnter();
        span();
        spanMouseEnter();
    }



</script>