使用锚点和js实现图片轮播效果

最新推荐文章于 2022-04-20 16:33:47 发布

abc33445

最新推荐文章于 2022-04-20 16:33:47 发布

阅读量220

点赞数

原文链接：http://www.cnblogs.com/huzhazha/p/7091887.html

版权

直接上代码，有一定基础的人都可以看得懂，这里就不做过多的解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现图片轮播</title>
    <style>
        div {
            margin: 0;
            padding: 0;
        }
        
        #box {
            position: relative;
        }
        
        #box .anchor {
            position: absolute;
            width: 100%;
            height: 570px;
            background-repeat: no-repeat;
            background-position: center top;
            opacity: 0;
        }

        
        #control {
            position: fixed;
            width: 500px;
            top: 530px;
            left: 35%;
        }
        #control a {
            font-size: 30px;
            text-decoration: none;
            font-weight: bolder;
            color: white;
            background-color: #5fa;
            opacity: 0.7;
            border-radius: 30px;
            margin-left: 80px;
        }

        #box .anchor:target {
            opacity: 1;
        }
        
        #box .anchor:nth-of-type(1) {
            opacity: 1;
        }


    </style>
</head>
<body>
    <div id="box">
        
        <div>
            <img id="anchor1" class="bgc-img1 anchor" src="b1.jpg">
        
            <img id="anchor2" class="bgc-img2 anchor" src="b2.jpg">

            <img id="anchor3" class="bgc-img3 anchor" src="b3.jpg">
        </div>

            
        <div id="control">
            <a href="#anchor1">○</a>
            <a href="#anchor2">○</a>
            <a href="#anchor3">○</a>
        </div>
    </div>

    <script>
        // 使用js实现图片交替变化
        var nodeNum = 3;
        var idStrAhead = "anchor";
        var sequenceArray = new Array();
        for (var i = 0; i < nodeNum; i++) {
            sequenceArray[i] = document.getElementById(idStrAhead + (i+1));
        }
        // 当前显示的图片在数组中的下标
        var currIndex = 0;
        
        setInterval(function() {
            // 如果下标已经等于nodeNum了，表示已经超出数组范围，此时需要将下标设置为0
            if (currIndex == nodeNum) {
                currIndex = 0;
                clearTransitionDelayAndPic(sequenceArray[nodeNum-1]);
            } else if (currIndex != 0){
                clearTransitionDelayAndPic(sequenceArray[currIndex-1]);
            }
            addTransitionDelayAndPic(sequenceArray[currIndex], 1.5)
            currIndex++;
        }, 1500);

        // 清除延迟转变和图片样式
        function clearTransitionDelayAndPic(obj) {
            obj.style.transition = 0 + 's'; //清除照片的转变延迟
            obj.style.opacity = 0;// 清除上一张图片
        }
        // 给图片添加转变延迟并且显示图片
        function addTransitionDelayAndPic(obj, delay) {
            obj.style.transition = delay + 's'; //添加照片的转变延迟
            obj.style.opacity = 1;// 添加一张图片
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/huzhazha/p/7091887.html

abc33445

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用锚点和js实现图片轮播效果

直接上代码，有一定基础的人都可以看得懂，这里就不做过多的解释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js实现图片轮播</title> <style> div { ...
复制链接

扫一扫