js实现简单的轮播图

最新推荐文章于 2023-11-24 10:50:06 发布

爱吃栗子的小单

最新推荐文章于 2023-11-24 10:50:06 发布

阅读量183

点赞数

分类专栏： js 文章标签： js 轮播图

本文链接：https://blog.csdn.net/weixin_40820061/article/details/83999114

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html+css代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 730px;
            height: 454px;
            padding: 8px;
            border: 1px solid green;
            margin: 100px auto;
        }

        .inner {
            position: relative;
            overflow: hidden;
            height: 454px;
        }

        #imglist {
            width: 700%;
            position: absolute;
            left: 0;
        }

        li {
            float: left;
        }

        .list {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -85px;
        }

        .list i {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
            color: #333;
            float: left;
            font-style: normal;
            line-height: 20px;
            font-size: 14px;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
        }

        .list i:last-child {
            margin-right: 0;
        }

        .list i.current {
            background-color: skyblue;
            color: #fff;
        }

        .arrow {
            position: absolute;
            width: 100%;
            top: 50%;
            margin-top: -30px;
        }

        .arrow-left, .arrow-right {
            width: 30px;
            height: 60px;
            position: absolute;
            font: 20px/60px "consolas";
            color: #fff;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            cursor: pointer;
        }

        .arrow-right {
            right: 0;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="inner" id="inner">
        <ul id="imglist">
            <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        </ul>
        <div class="list">
            <i class="current">1</i>
            <i>2</i>
            <i>3</i>
            <i>4</i>
            <i>5</i>
            <i>6</i>
        </div>
        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>
</div>
</body>
</html>

js代码：

<script src="animate.js"></script>
<script>
    /*
     *  功能：
     *   1  序号控制器切换<对应>图片     --   click
     *   2  点击<左按钮>切换<下一张>图片   --   click
     *   3  点击<右按钮>切换<上一张>图片   --   click
     *   4  <自动>轮播，切换<下一张>图片   --  setInterval
     *   5  鼠标移入轮播图的范围，<停止>自动轮播      --  mouseover  clearInterval
     *   6  鼠标移出轮播图的范围，重新<启动>自动轮播  --  mouseout
     *
     * */
    /* 功能1：当__序号控制器__被__点击__时，效果是__切换对应的图片__ */

    //获取序号控制器
    var controlItems = document.querySelectorAll('.list>i');
    //获取图片列表
    var imgList = document.getElementById('imglist');
    //获取图片的宽度
    var imgWidth = document.querySelectorAll('#imglist img')[0].offsetWidth;


    //给序号控制器添加点击事件
    for(var i=0; i< controlItems.length; i++ ){
        // 循环遍历内部
        //给所有的控制器添加index索引值属性
        controlItems[i].index = i;
        //给所有的控制器添加点击事件
        controlItems[i].onclick = function(){
            /*切换序号*/
            //排他，切换对应的序号，清除所有的类名
            for(var i=0; i< controlItems.length; i++ ){
                // 循环遍历内部
                controlItems[i].className='';
            }
            //通过this确定当前点击的序号，添加类名
            this.className = 'current';

            /*根据索引值切换对应的图片*/
            //获取索引值
            var index = this.index;
            //根据索引值计算目标位置
            var target = index * imgWidth * -1;//这里不能带单位，因为动画要数学计算
            //调用animate函数
            animate(imgList,target);
        }
    }

    /* 功能2：当__右按钮__被__点击__时，效果是__切换<下一张>图片__ */
    //查找左右按钮
    var arrowLeft = document.querySelector('.arrow-left');
    var arrowRight = document.querySelector('.arrow-right');
    var maxIndex = controlItems.length ;//最大的索引值

    //定义一个控制图片和小圆点切换的索引值
    var keyIndex = 0;
    //给右按钮添加点击事件
    arrowRight.onclick = moveRight;
        function moveRight(){
        //每次点击，索引值加1，用于切换到下一张图片
        if(keyIndex == maxIndex){
            keyIndex = 0;
            /*若果达到了最大值6，让图片7瞬间变成图片1，为的就是图1切图2的时候有动画效果*/
            imgList.style.left = 0;
        }
        keyIndex++;
//        // 如果当前的索引值超出了最大索引值
//        if(keyIndex > maxIndex){
//            //重新变成0
//            keyIndex = 0;
//        }
//        console.log(keyIndex);
        /* 因为图片需要切换到第七张图片，所以最大的索引值应该能取到 6 */
        //切换序号
        for(var i=0; i< controlItems.length; i++ ){
            // 循环遍历内部
            controlItems[i].className = '';
        }
        if(keyIndex == maxIndex){
            //如果索引值已经等于6，我们就让小圆点从0开始
            controlItems[0].className = 'current';
        }else{
            controlItems[keyIndex].className = 'current';
        }
        //切换图片
        var target = keyIndex * imgWidth * -1;
        animate(imgList,target);
    }

    /* 功能3：当__左按钮__被__点击__时，效果是__切换<上一张>图片__ */
    //给左按钮添加点击事件
    arrowLeft.onclick = function(){
        //每次点击时，索引值减1，和右按钮相反
        if(keyIndex == 0){
            keyIndex = maxIndex;
            /* 如果到达了最小索引值0，让图片1瞬间变成图7，为的就是图7切图6的时候有动画效果 */
            imgList.style.left = keyIndex * imgWidth * -1 + 'px';
        }
        keyIndex--;
        /* 因为图片需要切换到第七张图片，所以最大的索引值应该能取到 6 */
        //切换序号
        for(var i=0; i< controlItems.length; i++ ){
            // 循环遍历内部
            controlItems[i].className='';
        }
        /*对于小圆点来说，索引值要控制好范围 0-5*/
        if(keyIndex == maxIndex){
            //如果索引值已经等于6，我们就让小圆点从0开始
            controlItems[0].className='current';
        }else{
            controlItems[keyIndex].className = 'current';
        }
        //切换图片
        var target = keyIndex * imgWidth * -1;
        animate(imgList,target);
    }

    /*自动轮播*/
    //每隔一段时间把向右的逻辑执行一次
    var intervalId = setInterval(moveRight,1500);
    //停止自动轮播
    box.onmouseover = function(){
	    //鼠标移入的时候切换停止，清除定时器
        clearInterval(intervalId);
    }
    box.onmouseout = function(){
	    //为了保证只有一个定时器启动，先把之前的清除掉
        clearInterval(intervalId);
        //鼠标移开的时候启动定时器
        intervalId = setInterval(moveRight,1500);
    }
</script>

animate.js

/**
 *
 *  封装动画函数  animate
 *  @param  element      需要做动画的元素
 *  @param  target       目标位置
 *  @param  step         动画步长
 **/
function animate(element, target, step) {
    //* 清空原本的定时器，防止定时器重复启动 */
    clearInterval(element.timer);
    // 启动一个定时器，让一份数据累加，这份数据以后用于做动画效果
    element.timer = setInterval(function () {
        // 获取当前盒子的 水平 坐标值
        var current = element.offsetLeft;
        // 让数据累加
        //* 拿当前位置和目标位置判断大小  */
        /* 把步长定义成变量，定义默认值为 40 */
        step = step || 40;
        current += current < target ? step : -step;
        // 把数据应用到盒子上，设置给 left 属性，让盒子动起来
        element.style.left = current + 'px';
        //* 判断是否需要停下来 */
        // 如果目标位置 - 当前位置的值小于 步长，那么就需要停下来
        //* 用绝对值函数取正数 */
        if (Math.abs(target - current) < step) {
            // 清除定时器停止运动
            clearInterval(element.timer);
            // 一瞬间把它设置到目标位置，防止无法到达目标位置
            element.style.left = target + 'px';
        }
    }, 20);
}