用原生JS实现轮播图

来源：互联网发布：怎么在淘宝上找代理编辑：程序博客网时间：2024/06/04 18:43

首先用我的思路总结一下：

1.设置一个最外层的容器，这个容器就是我们要展示图片的区域，用overflow:hidden将超出显示区域的内容全部隐藏掉。

2.在最外层容器内设置一个大图容器，用来将要展示的图片按从左到右的顺序排放，比如使用ul，将其宽度设成最外层容器宽度*N（图片数量）,并且设置绝对定位position:absolute,因为我们要通过控制left属性来移动整个大图实现图片切换的效果。

3.在大图容器里面使用li来存放要展示的图片，使用float:left让所有图片在大图容器里面从左到右排列。

4.使用js修改left值控制大图容器向左或向右移动，通过循环定时器进行连续小幅度修改left以达到动画的连贯效果。

详解JS：

首先我们的轮播图要动起来，利用定时器现在自动滚动的效果，图片的转换牵涉到了层叠，最后我们再考虑到浏览器的兼容问题！

做到这些，是我们js的第一步。自动播放的函数play（），主要就是setTimeOut。

 // 自动播放函数；    function play() {        timer = setTimeout(function () {            next.onclick();            play();        }, interval);    }    // 停止自动播放函数；    function stop() {        clearTimeout(timer);    }

封装小圆点切换功能函数；

    function showButton() {        // 重置所有按钮；        for (var i = 0; i < buttons.length ; i++) {            if( buttons[i].className == 'on'){                buttons[i].className = '';                break;            }        }        buttons[index - 1].className = 'on';    }

两边的点击事件：

// 左箭头点击切换事件；    prev.onclick = function () {        if (animated) {            return;        }        // 同步小圆点的index；        if (index == 1) {            index = 5;        }        else {            index -= 1;        }        animate(600);        showButton();    }    // 右箭头点击切换事件；    next.onclick = function () {        if (animated) {            return;        }        // 同步小圆点的index；        if (index == 5) {            index = 1;        }        else {            index += 1;        }        animate(-600);        showButton();    }

封装点击箭头时两向滑动的函数：

    function animate (offset) {        if (offset == 0) {            return;        }        animated = true;        // 位移持续时间；        var time = 300;        // 位移间隔时间；        var inteval = 50;        // 每次位移量；        var speed = offset/(time/inteval);        var left = parseInt(list.style.left) + offset;        var go = function (){            // 判断是否需要作位移；            if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {                list.style.left = parseInt(list.style.left) + speed + 'px';                // 递归自身以实现位移动画；                setTimeout(go, inteval);            }            else {                list.style.left = left + 'px';                // 判断是否在1或5，超出时归位重置；                if(left>-200){                    list.style.left = -600 * len + 'px';                }                if(left<(-600 * len)) {                    list.style.left = '-600px';                }                animated = false;            }        }        go();    }

完成了这些函数，轮播图就写完了，接下来奉上全部代码：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>焦点轮播图</title>    <style type="text/css">       /* reset */*{     margin: 0;     padding: 0;     text-decoration: none;}body {     padding: 20px;    background-color: black;}/* 外部大容器 */#container {     width: 600px;     height: 400px;     border: 15px solid #FFF;     overflow: hidden;     position: relative;    margin: 0 auto;}/* 列表容器 */#list {     width: 4200px;     /* 7张宽600px的图 */    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 span {     cursor: pointer;     float: left;     border: 1px solid #fff;     width: 10px;     height: 10px;     border-radius: 50%;     background: #333;     margin-right: 5px;}/* 圆点小按钮激活状态 */#buttons .on {     background: orangered;}/* 箭头 */.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>    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;    var len = 5;    var animated = false;    var interval = 3000;    var timer;    // 封装点击箭头时两向滑动的函数；    function animate (offset) {        if (offset == 0) {            return;        }        animated = true;        // 位移持续时间；        var time = 300;        // 位移间隔时间；        var inteval = 50;        // 每次位移量；        var speed = offset/(time/inteval);        var left = parseInt(list.style.left) + offset;        var go = function (){            // 判断是否需要作位移；            if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {                list.style.left = parseInt(list.style.left) + speed + 'px';                // 递归自身以实现位移动画；                setTimeout(go, inteval);            }            else {                list.style.left = left + 'px';                // 判断是否在1或5，超出时归位重置；                if(left>-200){                    list.style.left = -600 * len + 'px';                }                if(left<(-600 * len)) {                    list.style.left = '-600px';                }                animated = false;            }        }        go();    }    // 小圆点切换功能函数；    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 play() {        timer = setTimeout(function () {            next.onclick();            play();        }, interval);    }    // 停止自动播放函数；    function stop() {        clearTimeout(timer);    }    // 左箭头点击切换事件；    prev.onclick = function () {        if (animated) {            return;        }        // 同步小圆点的index；        if (index == 1) {            index = 5;        }        else {            index -= 1;        }        animate(600);        showButton();    }    // 右箭头点击切换事件；    next.onclick = function () {        if (animated) {            return;        }        // 同步小圆点的index；        if (index == 5) {            index = 1;        }        else {            index += 1;        }        animate(-600);        showButton();    }    // 单击小圆点切换事件；    for (var i = 0; i < buttons.length; i++) {        buttons[i].onclick = function () {            // 停留当前图片时重复点击不刷新；            if (animated) {                return;            }            if(this.className == 'on') {                return;            }            var myIndex = parseInt(this.getAttribute('index'));            var offset = -600 * (myIndex - index);            animate(offset);            // 更新index值；            index = myIndex;            showButton();        }    }    container.onmouseover = stop;    container.onmouseout = play;    play();}    </script></head><body><div id="container">    <div id="list" style="left: -600px;">        <img src="555.png" alt="1" width="600px" height="400px"/>        <img src="111.png" alt="1" width="600px" height="400px"/>        <img src="222.png" alt="2" width="600px" height="400px"/>        <img src="333.png" alt="3" width="600px" height="400px"/>        <img src="444.png" alt="4" width="600px" height="400px"/>        <img src="555.png" alt="5" width="600px" height="400px"/>        <img src="111.png" alt="5" width="600px" height="400px"/>    </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"><</a>    <a href="javascript:;" id="next" class="arrow">></a></div></body></html>

阅读全文

1 0