jQ版渐隐渐现轮播图(自看,内含详细思路,用ajax异步处理的)-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .container{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            border: 3px solid springgreen;
            background: yellow;
        }
        .swiper{
            position: relative;
            width: 100%;
            height: 100%;
        }
        div.item{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /*opacity: 0;*/
            text-align: center;
            font-size: 50px;
            line-height: 300px;
            /*transition:all 0.3s;*/
        }
        /*.item.select{*/
           /*opacity: 1;!*设置渐隐渐现,实现渐隐渐现轮播图*!*/
        /*}*/
        .pagenation{
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
            overflow: hidden;
        }
        .pagenation li{
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #ffffff;
            margin: 0 10px;
        }
        .pagenation li.on{
            background: #000;
        }
        #left{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 20px;
            border-top: 5px solid hotpink;
            border-left: 5px solid hotpink;
            transform: translateY(-50%) rotateZ(-45deg);
        }
        #right{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            right: 20px;
            border-top: 5px solid hotpink;
            border-right: 5px solid hotpink;
            transform: translateY(-50%) rotateZ(45deg);
        }
    </style>
</head>
<body>
<div class="container" id="container">
    <!--swiper部分-->
    <div class="swiper" id="swiper">
        <!--<div class="item select" style="background: red">1</div>-->
        <!--<div class="item" style="background: yellowgreen">2</div>-->
        <!--<div class="item" style="background: lime">3</div>-->
        <!--<div class="item" style="background: purple">4</div>-->

    </div>
    <!--模板-->
    <!-- 模板 -->
    <div id="swiperTemp" style="display: none">
        <div class="item"><img src="#img#" alt="#desc#"></div>
    </div>

    <!--分页器部分-->
    <ul class="pagenation" id="pagenation">
        <!--<li class="on"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>

    <!--左右箭头-->
    <a href="javascript:;" id="left"></a>
    <a href="javascript:;" id="right"></a>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
    var container=document.getElementById('container');
    var swiper=document.getElementById('swiper');
    var items=document.getElementsByClassName('item');
    var pagenation=document.getElementById('pagenation');
    var oLis=document.getElementsByTagName('li');

    ;(function($){
       //通过ajax获取数据,渲染数据
       $.ajax({
           url:'./banner.json',
           type:'GET',
           success:function(res){
               console.log(res);
               bindHtml(res);
           }
       });

        function bindHtml(data){
            $.each(data,function(i,v){//遍历$.each()
                   var template=$('#swiperTemp').html();//
                   template=template.replace('#img#',v.img);
                   template=template.replace('#desc#',v.desc);
                   $('#swiper').append(template);
                   $('#pagenation').append('<li></li>');
            });
            $('#swiper .item').eq(0).fadeIn();//找第一张图片,fadeIn就是让透明度从0到1显示出来,3000毫秒显示出来,fadeIn的话只能是当前的元素设置display:none;
            $('#pagenation li').eq(0).addClass('on');

            animate($('#swiper .item').length);

        }

        function animate(imgLength){//创建一个animate函数,把定时器,渲染图片和渲染分页器都放在animate函数中
            var step=0;//定义当前图片的索引step为0
            //定时器每执行一次,当前图片的索引++,就到了下一张图片,
                 var timer=setInterval(function(){
                     step++;//一共四张图片,第一张图片的索引是0,step++的话,step索引变为1,为第二张,没到最后一张的话step还要再++,step索引为2,为第三张,还没到第四张的时候,索引已经为2,step再++,step为3,为第四张了,step++为4了,没有索引为4这张图片,然后让step马上为0回到第一张
                     console.log(step);//1,
                     //如果当前的step再++step为4的时候,索引为4的这张图片不存在,我们让step为0,让图片回到索引step为0的第一张图片
                     if(step>=imgLength){//当step>=4的时候,已经是第五张了,让step=0回到第一张图片
                         step=0;
                     }
                     renderImgs();
                     renderPagenation();
                 },2000);
//
//                 $('#pagenation li').click(()=>{
//                    //元素绑定事件中的函数中的this,指向当前被绑定的这个元素,在jQ里面用这个this的话就需要$('this')
//                    //$('this').index();//当前元素的索引
//                    //点哪个圆点li的话,就让它显示step索引的哪张图片
//                     var curIndex=$(this).index();
//                     console.log(curIndex);
//                     step=curIndex;
//                     renderImgs();
//                     renderPagenation();
//            });

            $("#pagenation li").on("click", function () {
                // this指向被点击的元素，js元素
                // $(this)，将this转化成jquery对象
                var curIndex = $(this).index();
                step = curIndex;
                renderImgs();
                renderPagenation();
            });

                  $('#left').click(()=>{//左箭头
                      step--;
                      if(step<0){
                         step=imgLength-1;
                      }
                      renderImgs();
                      renderPagenation();
                  });
                  $('#right').on('click',()=>{//右箭头
                      step++;
                      if(step>=imgLength){
                         step=0;
                      }
                      renderImgs();
                      renderPagenation();
                  });

                  //鼠标华航,移除事件
                  $('#container').hover(()=>{//鼠标滑过的时候,要清除定时器,
                      clearInterval(timer);
                  },()=>{
                      timer=setInterval(()=>{
                          step++;
                          if(step>imgLength-1){
                              step=0;
                          }
                          renderImgs();
                          renderPagenation();
                      },2000);
                  });


                  function renderImgs(){
                      //swiper下的随机一项,索引step对应的那项,用jQ的fadeIn()的话,先要把当前的元素display:none一下,让其他的兄弟的话fadeOut()淡出
                      $('#swiper .item').stop().eq(step).fadeIn().siblings().fadeOut();//on是自己在样式中,给pagenation下的带类名的li的加的类名on
                  }

                  function renderPagenation(){
                      //分页器下的小圆点,li为小圆点,当小圆点的索引和当前某一张图片的step索引相等的时候切换
                      $('#pagenation li').eq(step).addClass('on').siblings().removeClass('on');
                  }
        }
    }(jQuery))

</script>
</body>
</html>
复制代码