JS实战002:带点选的滑动轮播图

前面我们制作了一个简单的走马灯轮播图效果，只能通过切换按钮来上下切换图片，但是通常我们看到轮播图都是带点选的，当我选择哪张图片的时候我们就切换到哪张图，底下图标跟着图片的轮播自动切换，下面是效果图。

前面我们已经实现了在设置好的时间间隔内对图片进行自动轮播，然后点击左右箭头进行图像的切换，当鼠标移入/移出控制轮播图的停止/继续，现在我们新增一个页码（有时候只是个按钮）。

首先我们先来实现底下页码跟随左右切换按钮进行自动切换，这里的原理就是将span的属性进行更改，为了方便我把原来的span按钮改成了a链接，在picture下面我们添加一个page的div，里面附上和轮播图一样多的span元素，这样我们的DOM中就只有页码的span元素了，这样定位起来比较方便。

<div class="Carousel">
        <div id="picture">
            <img src="../src/assets/images/1.png" alt="">
            <img src="../src/assets/images/2.png" alt="">
            <img src="../src/assets/images/3.png" alt="">
            <img src="../src/assets/images/1.png" alt="">
        </div>
        <div class="page">
            <span class="show">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a>
        <a href="javascript:;" class="arrow arrow_right">></a>
</div>

当然我们也可以通过获取img的数量动态生成页码数量，首先我们需要先获取page元素，然后在page下动态添加span标签，默认第一个span给定一个class，给这个输定定义一个背景色，当我切换页码时把这个class属性动态赋给对应的span标签。

var page_obj = document.querySelector(".page");
for(var i=0;i<pic.children.length;i++){
     var span_obj=document.createElement("span");
     page_obj.appendChild(span_obj);
     span_obj.innerText=i+1;
     page_obj[0].setAttribute("class","show")
}
// 背景色设置
.Carousel .page span.show{
     background-color: rgb(15, 151, 241);
}

接下来我们要实现的就是class=“show”属性的切换，定义一个index与move一样初始值为0，每次点击切换按钮的时候随着加减，然后把这个index带入到span中去遍历属性，将index以外的其他span标签中的class属性清空，然后将index对应的span属性添加class=“show”属性，这样对应的span就和图片一样动态的切换起来了。

function showPage () {
    for(var i = 0;i < pages.length; i++){
        pages[i].className = '';
        }
        pages[index].className = 'show';
}
//上下切换按钮修改，把index添加进去
next.onclick=function(){
        if(move==pic.children.length-1){
            move=0;
            pic.style.left=0+"px";
        }
        move++;
        animate(pic,-move*imgwidth);
        index++;
        if(index>2){
            index=0;
        }
    }
prev.onclick=function(){
        if(move==0){
            move=pic.children.length-1;
            pic.style.left=-move*imgwidth+"px";
        }
        move--;
        animate(pic,-move*imgwidth);
        index--;
        if(index<0){
            index=2;
        }
    }

我写了一个showPage函数，然后把这个函数加入到animate方法中，当执行animate时就会触发showPage方法了，这样每次点击切换按钮的时候页码就会随之变换，加上自动属性这样就可以直接载入时就自动切换了，但是现在点击或者将鼠标移入标签还是无法切换到指定的页面，接下来我们开始实现这个功能。

实现任意切换的方法很简单，和我们的上下切换方法很相似，只是把没点击一次将move属性自增1改成当前页的值即可，我这里是直接获取的span标签中的值，如果没有值的话就直接赋值i，当move值到了最后一张图时又回到第一张如此循环即可。

for(var i=0;i<pages.length;i++){
    pages[i].onmouseover =function(){
    move=this.innerHTML-1;
    index=move;
    if(move==pic.children.length-1){
        move=0;
        pic.style.left=0+"px";
    }
    animate(pic,-move*imgwidth);
    }
}

通过以上的新增我们就得到了前面的演示效果了，下面是完整的代码，有兴趣的可以试试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Picture Carousel</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration: none;
    }
    .Carousel{
        position: relative;
        width:600px;
        height:400px;
        margin:50px auto;
        overflow: hidden;
        border:10px solid rgba(189, 184, 184,0.5);
        z-index: 1;
    }
    #picture{
        position: absolute;
        width: 2400px;
        height: 400px;
    }

    #picture img{
        float: left;
        width:600px;
        height:400px;
    }
    .Carousel .page{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom: 30px;
        height: 10px;
        z-index: 2;
    }
    .Carousel .page span{
        display: inline-block;
        width:30px;
        line-height: 30px;
        width: 30px;
        margin-left:20px;
        text-align: center;
        font-weight: 900;
        color:white;
        background: rgba(111, 112, 112,0.6);
        cursor: pointer;
    }
    .Carousel .page span.show{
        background-color: rgb(15, 151, 241);
    }
    .Carousel .arrow{
        cursor: pointer;
        position:absolute;
        top:40%;
        padding:10px 15px;
        background-color: rgba(255, 255, 255,0.8);
        display: inline-block;
        font-size: 50px;
        z-index: 2;
        color:rgb(161, 157, 157);
        font-weight: bold;
        display: none;

    }
    .Carousel .arrow_left{
        left:0;
    }
    .Carousel .arrow_right{
        right: 0;
    }
    .Carousel:hover .arrow{
        display: block;
    }
    .Carousel .arrow:hover{
        background-color: rgb(15, 151, 241);
        font-weight: bold;
        color:white;
    }
    </style>
</head>
<body>
    <div class="Carousel">
        <div id="picture">
            <img src="../src/assets/images/1.png" alt="">
            <img src="../src/assets/images/2.png" alt="">
            <img src="../src/assets/images/3.png" alt="">
            <img src="../src/assets/images/1.png" alt="">
        </div>
        <div class="page">
            <span class="show">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a>
        <a href="javascript:;" class="arrow arrow_right">></a>
    </div>
</body>
<script type="text/javascript">
    var pic =document.getElementById('picture');
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    var Carousel = document.querySelector(".Carousel");
    var pages = document.getElementsByTagName('span');
    var imgwidth=pic.children[0].offsetWidth;
    var move= 0 ;
    var index = 0;
    for(var i=0;i<pages.length;i++){
    pages[i].onmouseover =function(){
    move=this.innerHTML-1;
    index=move;
    if(move==pic.children.length-1){
        move=0;
        pic.style.left=0+"px";
    }
    animate(pic,-move*imgwidth);

    }
   }
    next.onclick=function(){
        if(move==pic.children.length-1){
            move=0;
            pic.style.left=0+"px";
        }
        move++;
        animate(pic,-move*imgwidth);
        index++;
        if(index>2){
            index=0;
        }
        console.log("index="+index)
    }
    prev.onclick=function(){
        if(move==0){
            move=pic.children.length-1;
            pic.style.left=-move*imgwidth+"px";
        }
        move--;
        animate(pic,-move*imgwidth);
        index--;
        if(index<0){
            index=2;
        }
        console.log("index="+index)
    }
    var timer = null;
    function autoPlay () {
    timer = setInterval(function () {
        next.onclick();
    },2000);
    }
    autoPlay();
    
    Carousel.onmouseenter = function () {
    clearInterval(timer);
    }
    Carousel.onmouseleave = function () {
    autoPlay();  
    }
    function animate(element,distance){
        clearInterval(element.timer)
        element.timer=setInterval(function(){
             var present=element.offsetLeft;//获取元素的当前的位置
             var movement=10;//每次移动的距离
             movement=present<distance?movement:-movement;    
             present+=movement;//当前移动到位置
             if(Math.abs(present-distance)>Math.abs(movement)){
                 element.style.left=present+"px"
             }else{
                 clearInterval(element.timer);
                 element.style.left=distance+"px"
             }
             showPage ()
        },10);
    }
    function showPage () {
        for(var i = 0;i < pages.length; i++){
            pages[i].className = '';
            }
            pages[index].className = 'show';
    }
</script>
</html>

JS实战002:带点选的滑动轮播图

猜你喜欢