实现简单的轮播图

时间 2019-11-09

标签实现简单繁體版

原文原文链接

小练习3：轮播图组件

任务描述
在和上一任务同一目录下面建立一个task0002_3.html文件，在js目录中建立task0002_3.js，并在其中编码，实现一个轮播图的功能。javascript

图片数量及URL均在HTML中写好css
能够配置轮播的顺序（正序、逆序）、是否循环、间隔时长html
图片切换的动画要流畅java
在轮播图下方自动生成对应图片的小点，点击小点，轮播图自动动画切换到对应的图片echarts
效果示例：http://echarts.baidu.com/ 上面的轮播图（不须要作左右两个箭头）dom

实现原理：控制图片的left值，把不须要的图片进行hidden。函数

实现思路

考察对dom节点，定时器，事件的处理。优化

JS部分

第一步实现点击切换动画

获取left //记得转换成数字，向左移动减600，向右移动加600this
封装animate 函数

/*
*进行轮播
*/
function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + 'px';
}

next.onclick = function(){
    animate(-600);
}
prev.onclick = function(){
    animate(600);
}

第二步实现无限轮播

实现：在第一张图和最后一张图都加上一张轮播的附属图片
进行判断，当移动到附属图时，把list-style-left的值改成原图，进行跳转
改变小圆点位置
- 实现：设置一个index，每次移动时改变 index的值，把属性设置为“on”
- 若是大于5，则跳转到1，若是小于1，则跳转到5；

在原有代码上添加

function animate(offset){
    var newleft = parseInt(list.style.left) + offset;
    list.style.left = newleft + 'px';
    if(newleft > -600){
        list.style.left = -3000+ 'px';
    }
    else if(newleft < -3000){
        list.style.left = -600 + 'px';
    }
}
next.onclick = function(){
    if(index==5){
        index = 1;
    }
    else{
        index+=1;
        
    }
    showButton();
    animate(-600);
}
prev.onclick = function(){
    if(index==1){
        index = 5;
    }
    else{
        index-=1;
    }
    showButton();
    animate(600);
}

第三步点击小圆点切换

获取自定义的index属性 //getAttribute
算出偏移量 //offset=-600*（目标位置的Index - 当前的Index）

/*
*显示小圆点
*/
function showButton(){
    for(var i = 0; i<buttons.length; i++){
        if(buttons[i].className== 'on'){
            buttons[i].className = '';
            break;
        }
    }
    buttons[index - 1].className = 'on';
}
/*
*点击小圆点时，移动到相应图片
*/
for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        if(this.className == 'on'){//进行优化，防止点在自己按钮是执行代码。
            return;
        }
        var myIndex = parseInt(this.getAttribute('index'));
        var offset = -600*(myIndex - index);
        animate(offset);
        index = myIndex;
        showButton();
        
    }
}

第四步自动转换

相对应每隔一段时间去执行next.onclick
鼠标移动到图片上是触发。

/*
*进行自动播放
*/
function play(){
    timer = setInterval(function(){
        next.onclick();
    },3000);
}
/*
*中止自动播放
*/
function stop(){
    clearInterval(timer);
}
container.onmouseover = play;
            
container.onmouseout = stop;

简单的轮播图就完成了
附上完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0px; padding: 0px; text-decoration: none;}
        body {padding: 20px;}
        #container {width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list {width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img {float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons .on{background: #f0f;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #DDD; margin-right: 5px;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}

    </style>
    <script type="text/javascript">
        window.onload = function(){
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            /*
            *显示小圆点
            */
            function showButton(){
                for(var i = 0; i<buttons.length; i++){
                    if(buttons[i].className== 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }
            /*
            *进行轮播
            */
            function animate(offset){
                var newleft = parseInt(list.style.left) + offset;
                list.style.left = newleft + 'px';
                if(newleft > -600){
                    list.style.left = -3000+ 'px';
                }
                else if(newleft < -3000){
                    list.style.left = -600 + 'px';
                }
            }

            next.onclick = function(){
                if(index==5){
                    index = 1;
                }
                else{
                    index+=1;
                    
                }
                showButton();
                animate(-600);
            }
            prev.onclick = function(){
                if(index==1){
                    index = 5;
                }
                else{
                    index-=1;
                }
                showButton();
                animate(600);
            }
            /*
            *进行自动播放
            */
            function play(){
                timer = setInterval(function(){
                    next.onclick();
                },3000);
            }
            /*
            *中止自动播放
            */
            function stop(){
                clearInterval(timer);
            }
            /*
            *点击小圆点时，移动到相应图片
            */
            for(var i = 0; i < buttons.length; i++){
                buttons[i].onclick = function(){
                    if(this.className == 'on'){//进行优化，防止点在自己按钮是执行代码。
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -600*(myIndex - index);
                    animate(offset);
                    index = myIndex;
                    showButton();
                    
                }
            }
            container.onmouseover = play;
            
            container.onmouseout = stop;

        }
    </script>
</head>
<body>
    <div id ="container">
        <div id="list" style="left:-600px;">
            <img src="http://p1.bpimg.com/567571/d663d99900769de2.jpg" alt="5">
            <img src="http://p1.bpimg.com/567571/94ff72e039660fe8.jpg" alt="1">
            <img src="http://p1.bpimg.com/567571/a419be5d821b989f.jpg" alt="2">
            <img src="http://p1.bpimg.com/567571/7bbc8903f85814d4.jpg" alt="3">
            <img src="http://p1.bpimg.com/567571/3f925d71cc93314f.jpg" alt="4">
            <img src="http://p1.bpimg.com/567571/d663d99900769de2.jpg" alt="5">
            <img src="http://p1.bpimg.com/567571/94ff72e039660fe8.jpg" alt="1">
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a> 
        <a href="javascript:;" id="next" class="arrow">&gt;</a> 
    </div>
</body>
</html>