页面图片自动滚动

最新推荐文章于 2024-05-13 15:54:57 发布

六月的⑩

最新推荐文章于 2024-05-13 15:54:57 发布

阅读量5.9k

点赞数 9

文章标签：页面动态切换图片手动切换

本文链接：https://blog.csdn.net/chenbogger/article/details/82153669

版权

打开网页时，图片自动在循环切换，当想仔细查看某一张图片时，停止自动播放，左右提供手动切换按钮，图片也可添加超链接；
代码为了方便没有外联

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        /*css代码开始 */
        <style>
            *{margin:0;padding:0;}
            #box1{width:800px;height:400px;margin:50px auto 0;position:relative;}
            #imgs{width:800px;height:400px;}
            .page{width:50px;height:80px;background-color:rgba(0,0,0,0.2);position:absolute;top:160px;font:20px/80px 'Microsoft YaHei';text-align:center;display:none;color:white;}
            #left{left:0;}
            #right{right:0;}
            #aff{list-style:none;position:absolute;left:210px;bottom:20px;}
            #aff li{width:20px;height:20px;float:left;border-radius:50%;margin-left:20px;background-color:gray;text-align:center;font:16px/20px "微软雅黑";}
        /*css代码结束 */
        </style>
        //js原生代码
        <script type="text/javascript">
            //页面加载完毕执行
            window.onload = function(){
                //获取所有标签对象
                var oBox1 =  document.getElementById("box1");
                var oImgs = document.getElementById("imgs");
                var oLeft = document.getElementById("left");
                var oRight = document.getElementById("right");
                var oLiArr = document.getElementsByTagName("li");
                //记录图片
                var num = 1;
                oLiArr[0].style.backgroundColor = "red";
                //启动定时器
                var timer = setInterval(run1,2000);
                function run1(){
                    num++;
                    accoord()
                }
                function accoord(){
                    //边界判断
                    if(num==9){
                        num = 1;
                    }
                    else if(num==0){
                        num = 8;
                    }
                    //切换图片
                    oImgs.src = "img/faa/" + num + ".jpg";
                    //重置所有圆点的颜色为灰色
                    for(var i = 0 ;i < oLiArr.length; i++){
                        oLiArr[i].style.backgroundColor = "gray";   
                    }
                    //将目前所选中的圆点设置为红色
                    oLiArr[num-1].style.backgroundColor = "red";
                }
                //鼠标移入窗口停止滚动
                oBox1.addEventListener("mouseover",stopFunc,false);
                function stopFunc(){
                    clearInterval(timer);
                    oLeft.style.display = "block";
                    oRight.style.display = "block";

                }
                //鼠标移出启动自动 滚动
                oBox1.addEventListener("mouseout",startFunc,false);
                function startFunc(){
                    timer = setInterval(run1,2000);
                    oLeft.style.display = "none";
                    oRight.style.display = "none";
                }
                //鼠标移入左右按钮
                oLeft.addEventListener("mouseover",pageFunc,false);
                oRight.addEventListener("mouseover",pageFunc,false);
                function pageFunc(){
                    clearInterval(timer);
                    this.style.backgroundColor = "rgba(0,0,0,0.6)";
                }
                //鼠标移出左右 按钮
                oLeft.addEventListener("mouseout",noPageFunc,false);
                oRight.addEventListener("mouseout",noPageFunc,false);
                function noPageFunc(){
                    this.style.backgroundColor = "rgba(0,0,0,0.2)";
                }
                //鼠标单击左按钮切换图片
                oLeft.addEventListener("click",function(){
                    num--;
                    accoord();
                },false);
                //鼠标单击右按钮切换图片
                oRight.addEventListener("click",function(){
                    num++;
                    accoord();
                },false);
                //鼠标移动圆点切换图片
                for(var i = 0;i < oLiArr.length;i++){
                    oLiArr[i].index = i + 1;
                    oLiArr[i].addEventListener("mouseover",function(){
                        clearInterval(timer);
                        num = this.index;
                        accoord();
                    },false);
                }
            }
        </script>
    </head>
    <--h5-->
    <body>
        <!--整个盒子-->
        <div id="box1">
            <img src="img/faa/1.jpg" id="imgs"/>
            <!--手动切换上一页-->
            <div id="left" class="page"><</div>
            <!--手动切换下一页-->
            <div id="right" class="page">></div>
            <!--页数-->
            <ul id="aff">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
    </body>
</html>

六月的⑩

关注

9
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
页面图片自动滚动

打开网页时，图片自动在循环切换，当想仔细查看某一张图片时，停止自动播放，左右提供手动切换按钮，图片也可添加超链接；代码为了方便没有外联&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫