JS 实现轮播图~

轮播图初识

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它的身影~ 前端玩家轮播图那必然是当家技能~
首先面对需求,我们需要了解轮播图应实现的功能:
基本功能

● 自动无缝滚动
● 左右按钮控制滚动
● 点击圆点切换图片

成品案列

在这里插入图片描述在这里插入图片描述

鼠标未触及区域时(自动滚动中)

在这里插入图片描述

鼠标触及区域后 (停止滚动,显示按钮)

整体构想及思路

(1)Html部分

<body>
   <div id= "parent">
       <div id="uls">
          <div class="ull">
   		<img src="dragon1.png" alt="">
   		<img src="mofang.jpg" alt="">
   		<img src="xingk.jpg" alt="">
   		<img src="yewan.jpg" alt="">
   		 </div>
           <ul id='litCir_ul'></ul>
       </div>
       <div id="buttons">
           <span id="left">&lt;</span>
           <span id="right">&gt;</span>
       </div>
   </div>
</body>

四个div,最外层id为parent的大div内包含了ull、uls和buttons三个div,divuls中包含了两个列表ull(图片列表), litCir_ul(小圆点列表),buttons里则包含了“左”, “右”两个按钮

(2)CSS部分
#parent{
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 500px;
    height: 309px;
}

#uls{
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
    overflow: hidden;
}

#ull{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 3000px;           /*多留出一张图片的宽度! img的宽度应为(图片数目+1)
                             *每张图片的宽度。也就是要多留出一张图片的宽度(下一部分解释)。*/
    list-style: none;
}
img{
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
}

#litCir_ul{
    position: absolute;
    margin: 0;
    padding: 0;
    right: 10px;
    bottom: 10px;
    list-style: none;
}
#litCir_ul li{
    margin: 0;
    padding: 0;
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%; 
    margin-left:10px ;
    cursor: pointer;
}

li.active{
    background-color: white;
}
li.quiet{
    background-color: #1e90ff;
}

#buttons{
    margin: 0;
    padding: 0;
    display: none;
}
#buttons span{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.3;
    cursor: pointer;
    color: #fff;
    background: black;
}
#left{
    left: 5px;
}
#right{
    left: 100%;
    margin-left: -45px;
}

img的宽度应为(图片数目+1)*每张图片的宽度。也就是要多留出一张图片的宽度(下一部分解释)。
div uls部分使用overflow:hidden隐藏img超出的部分,确保每次该区域只能显示一张完整的图片。

(3)JS 功能实现部分
step 1: 获取我们会用到的对象和变量

/*获取HTML中的对象: */
   var parent = document.getElementById("parent");
   var ull = document.getElementByTagname("img");
   var litCir_ul = document.getElementById("litCir_ul");
   var buttons = document.getElementById("buttons");
   var cLis =litCir_ul.children;

   var len = ull.children.length;     //图片张数
   var width = parent.offsetWidth;       //每张图片的宽度
   var rate = 15;                        //一张图片的切换速度, 单位为px
   var times = 1;                        //切换速度的倍率
   var gap = 2000;                       //自动切换间隙, 单位为毫秒
   var timer = null;                     //初始化一个定时器
   var picN = 0;                         //当前显示的图片下标
   var cirN = 0;                         //当前显示图片的小圆点下标
   var temp;
   
step2: 通过获取的元素来实现无缝滚动:

定义一个函数Roll()来实现动画效果。
通过控制img的left值来控制显示某张图片, 为了实现“滚动”的效果,我们需要逐渐改变img的left值,而不能直接使该值变化图片宽度的倍数。

function Roll(distance){                                         //参数distance:滚动的目标点(必为图片宽度的倍数)
clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器!
var speed = ull.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向

img_ul.timer = setInterval(function(){                           //设置定时器,每隔10毫秒,调用一次该匿名函数
    ull.style.left = ull.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
    var leave = distance - ull.offsetLeft;                    //距目标点剩余的px值      
    /*接近目标点时的处理,滚动接近目标时直接到达, 避免rate值设置不当时不能完整显示图片*/
    if (Math.abs(leave) <= Math.abs(speed)) {                    
        clearInterval(img_ul.timer);
        ull.style.left = distance + "px";
    }
},10);
}

☆ 注意:当图片从最后一张切换到第一张时,这时就不能通过逐渐改变img的left值来实现滚动的效果,于是克隆第一张图片至列表尾部,当滚动完最后一张图片时,继续滚动到克隆的第一张,然后将u’ll【0】(即第一张图片)的left值置为0。

  /*克隆第一个li到列表末*/
    ull.appendChild(ull.children[0].cloneNode(true));
step3:动态添加图片上的小圆点
 for (var i=0; i<len; i++){
     var a_li = document.createElement("li");
     a_li.className = 'quiet';
     litCir_ul.appendChild(a_li);
 }
 litCir_ul.children[0].className = "active";
step4:实现自动滚动

☆ 注意:小圆点和图片列表的li数目是不一样的,当滚动到最后一个克隆项时,此时小圆点实际上在第一个位置。

开始自动滚动:
timer = setInterval(autoRun, gap);

function autoRun(){
    picN++;
    cirN++;
    if(picN > len){                  //滚动完克隆项后
        img_ul.style.left = 0;       //改变left至真正的第一项处
        picN = 1;                    //从第二张开始显示
    }
    Roll(-picN*width);
        if(cirN > len-1){                //判断是否到了最后一个圆点
        cirN = 0;                 
    }
    for(var i=0; i<len; i++){
        cLis[i].className = "quiet";
    }
    cLis[cirN].className = "active";
}


step5 :使得点击原点切换图片

给每个小圆点绑定了onmouseover事件,这个方法有个细节,会根据两次小圆点的距离差调整速率为rate*times,使切换效果更自然(也就是说每次切换说花的时间基本一致,无论是第一张到第二张,还是第一张到最后一张)

 for(var i=0; i<len; i++){
        cLis[i].index = i;
        cLis[i].onmouseover = function(){
            for(var j=0; j<len; j++){
                cLis[j].className = "quiet";
            }
            this.className = "active";
            temp = cirN;
            picN = cirN = this.index;
            times = Math.abs(this.index - temp);  //距离上个小圆点的距离
            rate = rate*times;                    //根据距离改变切换速率
            Roll(-this.index * width);
            rate = 15;
        }
    }
step6 :触及区域,清除定时器,显示按钮.离开区域,添加定时器,隐藏按钮。
 parent.onmouseover = function(){
        clearInterval(timer);
        buttons.style.display = 'block';
    }
    parent.onmouseout = function(){
        timer = setInterval(autoRun, gap);
        buttons.style.display = 'none';
    }
step 7 :给 “<” 和“ >” 两个按钮添加onclick事件
 /*上一张*/
    buttons.children[0].onclick = function(){ 
        picN--;
        cirN--;
        if(picN < 0){                               //滚动完第一项后
            img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处
            picN = cirN = len-1;
        }
        Roll(-picN*width);
        //bug处理
        if(cirN < 0){
            cirN = len-1;
        }
        for(var i=0; i<len; i++){
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    /*下一张*/
    buttons.children[1].onclick = autoRun;
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值