JavaScript实现六种网页图片轮播效果详解

发布时间：2024年01月04日

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 650px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            /* 超出部分隐藏 */
        }
        /* 标题-轮播图 */
        h1 {
            text-align: center;
        }
        .carousel ul {
            list-style: none;
            /* 消除ul自带圆点 */
        }
        .carousel #list {
            width: 6000px;
            position: relative;
            left: 0px;
            /* 初始位置 */
            transition: left 0.5s ease 0s;
            /*图片跳转的过渡效果*/
        }
        .carousel #list img {
            width: 650px;
        }
        .carousel #list li {
            float: left;
            /* li排成一排显示 */
        }
        /* 上一张/下一张控制按钮 */
        .carousel>a {
            position: absolute;
            width: 30px;
            height: 50px;
            /* 垂直居中，距顶部一半的父元素盒子宽度，再向上移动自身的一半 */
            top: 50%;
            margin-top: -25px;
            background-color: rgba(163, 166, 167, 0.5);
        }
        .carousel>a>img {
            margin-left: -8px;
        }
        .carousel .leftbtn {
            left: 20px;
        }
        .carousel .rightbtn {
            right: 20px;
        }
        /* 底部定位圆点list */
        .carousel #location_list {
            width: 120px;
            position: absolute;
            top: 350px;
            left: 270px;
        }
        .carousel #location_list li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 5px;
            border: 1px solid white;
        }
        /* 圆点被激活时的样式，动态为圆点增加class */
        .carousel #location_list li.active {
            background-color: bisque;
        }
    </style>
</head>

<body>
    <h1>轮播图</h1>
    <div class="carousel">
        <!--图片列表  -->
        <ul id="list">
            <li><img src=" 380x268.jpg" alt="" /></li>
            <li><img src=" 8.jpg" alt="" /></li>
            <li><img src="h .jpg" alt="" /></li>
            <li><img src="images/number/4.jpg" alt="" /></li>
            <li><img src="images/number/5.jpg" alt="" /></li>
        </ul>
        <!-- 左右按钮 -->
        <a href="javascript:;" class="leftbtn"><img src="./images/lunbo/chevron-left.png" alt="" srcset=""></a>
        <a href="javascript:;" class="rightbtn"><img src="./images/lunbo/chevron-right.png" alt="" srcset=""></a>
        <!-- 圆点列表 -->
        <ul id="location_list">
            <!-- 默认激活第一个 -->
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var carousel = document.querySelector(".carousel");
        // 获取图片列表ul
        var olist = document.getElementById("list");
        // 获取定位数组
        var location_list = document.querySelectorAll('#location_list>li');

        // 向左按钮
        var leftbtn = document.querySelector('.leftbtn');
        // 向右按钮
        var rightbtn = document.querySelector('.rightbtn');

        // 将第一张图片加到最后一张，方便循环
        var oli = document.querySelector("#list li:first-child")
        olist.innerHTML += oli.innerHTML;

        // 当前显示的图片定位
        var img_location = 0;
        // 当前的圆点定位
        var dot_location = 0
        // 定义一个全局定时器变量
        var timer = null;
        // 默认不上锁，该状态为了保证过渡效果能完整呈现
        var islock = false;

        // 定义一个全局函数，自动跳到下一张，方便鼠标移入移出时调用
        function move() {
            timer = setInterval(function () {
                // 每隔1s点击向右按钮 
                rightbtn.click();
            }, 1000)
        }
        // 页面加载后自动调用，实现自动跳转下一张
        move();

        // 鼠标移入，清除定时器
        carousel.onmouseenter = function () {
            clearInterval(timer);
        }
        // 鼠标移出，调用自动播放
        carousel.onmouseleave = function () {
            move();
        }


        // 点击按钮切换下一张
        rightbtn.onclick = function () {
            if (islock) { return; }
            islock = true;
            if (img_location === 5) {
                // 清除过渡效果，从最后一张无缝衔接到开头
                olist.style.transition = "none";
                olist.style.left = "0px";
                img_location = 0;
            }
            // 由于代码执行过快，所以需要放到异步执行语句里
            setTimeout(function () {
                // 跳到第二张
                img_location += 1;
                dot_location += 1;
                olist.style.left = -650 * img_location + "px";
                olist.style.transition = "left 0.5s ease 0s";
                // 如果跳转后是第6张图片，实际上就是第一张图，圆点应该定位在第1个
                if (img_location === 5) {
                    dot_location = 0;
                    location_list[dot_location].className = "active";
                    location_list[4].className = "none";
                } else {
                    // 激活当前定位的圆点
                    location_list[dot_location].className = "active";
                    // 上一个圆点取消激活状态
                    location_list[dot_location - 1].className = "none"
                }

            }, 0)
            setTimeout(function () {
                islock = false;
            }, 500)
        };

        // 点击按钮切换上一张
        leftbtn.onclick = function () {
            if (islock) { return; }
            islock = true;
            // 清除过渡效果，从第一张无缝衔接到最后一张
            if (img_location === 0) {
                img_location = 5;
                olist.style.transition = "none";
                olist.style.left = -650 * img_location + "px";
            }
            // 由于代码执行过快，所以需要放到异步执行语句里
            setTimeout(function () {
                // 跳到上一张图
                img_location -= 1;
                dot_location -= 1;
                olist.style.transition = "left 0.5s ease 0s";
                olist.style.left = -650 * img_location + "px";
                // 如果跳完后是第五张图，圆点位置也要相应变成最后一个
                if (img_location === 4) {
                    dot_location = 4;
                    location_list[dot_location].className = "active";
                    location_list[0].className = "none";
                } else {
                    location_list[dot_location].className = "active";
                    location_list[dot_location + 1].className = "none"
                }
            }, 0)
            setTimeout(function () {
                islock = false;
            }, 500)
        }
    </script>
</body>

</html>

学习如何实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
    <div class="box">
        <a href="" class = 'left jiantou'>&lt;</a>
        <a href="" class = 'right jiantou'>&gt;</a>
        <ul class = 'pic'>
            <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./images/4.jpg" alt=""></a>
            </li>
             <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./images/5.jpg" alt=""></a>
            </li>
        </ul>
        <ul class="lis">
            <li></li>
            <li class = 'selected'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    position: relative;
    overflow: hidden;
    margin: 100px auto;
    width: 520px;
    height: 280px;
    background-color: red;
}
.jiantou{
    font-size: 24px;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 20px;
    height: 30px;
    line-height: 30px;
    background: rgba(158, 154, 154, 0.7);
    color: white;
    z-index: 999;
}
.left{
    position: absolute;
    top: 125px;
    left: 0px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.right{
    position: absolute;
    top:125px;
    left: 500px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
img{
    width: 520px;
    height: 280px;
}
.box .pic{
    width: 600%;
}
.pic li {
    float: left;
}
.lis{
   position: absolute;
   bottom: 15px;
   left: 50%;
   margin-left: -35px;
   width: 70px;
   height:13px;
   border-radius: 7px; 
   background: rgba(158, 154, 154, 0.7);
}
.lis li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: #fff;
   
}
.lis .selected{
    background-color: cyan;
}

window.addEventListener('load',function(){
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('mouseenter',function(){
        left.style.display = 'block';
        right.style.display = 'block';
    })
    box.addEventListener('mouseleave',function(){
        left.style.display = 'none';
        right.style.display = 'none';
    })
    var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    var boxWidth = box.offsetWidth;
    for(var i = 0;i<pic.children.length;i++){
        
        var li = document.createElement('li');
        lis.appendChild(li);
        //设置索引号
        li.setAttribute('index',i);
        li.addEventListener('click',function(){
            //获得索引号
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            for(var i = 0;i<lis.children.length;i++){
                lis.children[i].className = '';
            }
            this.className = 'selected';
            animate(pic,-index*boxWidth)
        })
    }
    lis.children[0].className = 'selected';
    //克隆第一个li
    var first = pic.children[0].cloneNode(true);
    pic.appendChild(first);
    var num = 0;
    var circle = 0;
    //右侧按钮的功能
    right.addEventListener('click',function(){
        if(num == pic.children.length-1){
            pic.style.left = 0;
            num = 0;
        }
        num++;
        animate(pic,-num*boxWidth);
        circle++;
        if(circle == lis.children.length){
            circle = 0;
        }
        for(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = 'selected';
    })
    //左侧按钮功能
    left.addEventListener('click',function(){
        if(num == 0){
            num = pic.children.length-1;
            pic.style.left = -num*boxWidth+'px';
            
        }
        num--;
        animate(pic,-num*boxWidth);
        circle--;
        if(circle <0){
            circle = lis.children.length-1;
        }
        for(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = 'selected';
    })
    var timer = this.setInterval(function(){
        right.click();
    },2000)
})

来源： JavaScript实现六种网页图片轮播效果详解_javascript技巧_脚本之家

文章来源:https://blog.csdn.net/q28000/article/details/135383118
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！