图片轮番

最新推荐文章于 2023-03-25 10:47:11 发布

紫晓宁

最新推荐文章于 2023-03-25 10:47:11 发布

阅读量515

点赞数

分类专栏：前端web 文章标签：图片轮番Demo

本文链接：https://blog.csdn.net/zixiaoning/article/details/52067954

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>

        #controls {
            width:400px;
            margin: auto;
            text-align: center;
        }
        #container {
            width: 400px;
            height:400px;
            border: 10px solid #eee;
            position: relative;
            background: gray;
            margin: 10px auto 0;
        }
        #prev, #next {
            position: absolute;
            background: black;
            filter:alpha(opacity:40);
            opacity: 0.4;
            font-size: 20px;
            color: white;
            width: 40px;
            height: 40px;
            border: 2px solid white;
            line-height: 40px;
            text-align: center;
            top: 180px;
            pointer: cursor;
            text-decoration: none;
        }
        #prev:hover, #next:hover {
            filter:alpha(opacity:80);
            opacity: 0.8;
        }
        #order, #info {
            position: absolute;
            width:100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: black;
            filter:alpha(opacity:60);
            opacity: 0.6;
            font-size: 20px;
            color: white;
        }
        #prev {
            left: 0;
        }
        #next {
            right: 0;
        }
        #picture {
            height: 400px;
            width: 400px;
        }
        #order {
            top: 0;
        }
        #info {
            bottom: 0;
        }

    </style>
    <script>

        window.onload = function(){
            //获取网页信息
            var oRound = document.getElementById('round'),
                    oSingle = document.getElementById('single'),
                    oPrev = document.getElementById('prev'),
                    oNext = document.getElementById('next'),
                    oOrder = document.getElementById('order'),
                    oInfo = document.getElementById('info'),
                    oPicture = document.getElementById('picture'),
                    arrPic = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"],//
                    arrInfo = ["baby", "me", "sister", "dad"],//
                    interval=3000,
                    timer,
                    i = 0;

            function changeTab() {
                oOrder.innerHTML = i + 1 + ' / ' + arrPic.length;
                oInfo.innerHTML = arrInfo[i];
                oPicture.src = arrPic[i];
            }
            changeTab();//初始化轮番图片

            // 向后翻页
            oNext.onclick = function(){
                i++;
                if(i>3) {
                    i = 0;
                }
                changeTab();
            }
            // 向前翻页
            oPrev.onclick = function(){
                i--;
                if(i<0) {
                    i = 3;
                }
                changeTab();
            }
          // 自动轮番
            function play() {
                timer = setTimeout(function () {
                    oNext.onclick();
                    play();
                }, interval);
            }
            play();
        }

    </script>
</head>
<body>
<div id="controls">
    <input id="round" type="button" value="循环播放">
    <input id="single" type="button" value="顺序播放">
</div>
<div id="container">
    <a id="prev" href="javascript:"><</a>
    <a id="next" href="javascript:">></a>
    <div id="order">1 / 4</div>
    <div id="info">图片一</div>
    <img id="picture" src="1-img/1.jpg">
</div>
</body>
</html

紫晓宁

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
图片轮番

html lang="en">head> meta charset="UTF-8"> title>图片轮播title> style> #controls { width:400px; margin: auto; text-align: center; }
复制链接

扫一扫