js仿京东轮播图效果

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_34144848

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/yongqingfan/blog/522444

本文介绍了一个基于HTML和JavaScript实现的轮播图自动切换效果。通过设置定时器自动切换图片，并支持鼠标悬停暂停及点击切换等功能。文章详细展示了如何使用DOM操作和事件监听来完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
a{text-decoration: none;color: #fff;}
#flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}
#pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
#num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}
#num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
#num li.active{background: #f00;}
.arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;background-color: rgba(0,0,0,0.3);z-index: 3;display: none;}
.arrow:hover{background: rgba(0,0,0,0.7);}
#flash:hover .arrow{display: block;}
#left{left: 2%;}
#right{right: 2%;}
</style>
<script type="text/javascript">
    function $(id) {
        return typeof id==='string'?document.getElementById(id):id;
    }
    window.onload=function(){
        var index=0;
        var timer=null;
        var pic=$("pic").getElementsByTagName("li");
        var num=$("num").getElementsByTagName("li");
        var flash=$("flash");
        var left=$("left");
        var right=$("right");
        //单击左箭头
        left.onclick=function(){
            index--;
            if (index<0) {
                index=num.length-1
            };
            changeOption(index);
        }
        //单击右箭头
        right.onclick=function(){
            index++;
            if (index>=num.length) {
                index=0
            };
            changeOption(index);
        }
        //鼠标划在窗口上面，停止计时器
        flash.onmouseover=function(){
            clearInterval(timer);
        }
        //鼠标离开窗口，开启计时器
        flash.onmouseout=function(){
            timer=setInterval(run,2000)
        }
        //鼠标划在页签上面，停止计时器，手动切换
        for(var i=0;i<num.length;i++){
            num[i].id=i;
            num[i].onmouseover=function(){
                clearInterval(timer);
                changeOption(this.id);
            }
        }
        //定义计时器
        timer=setInterval(run,2000)
        //封装函数run
        function run(){
            index++;
            if (index>=num.length) {
                index=0
            };
            changeOption(index);
        }
        //封装函数changeOption
        function changeOption(curindex){
            console.log(index)
            for(var j=0;j<num.length;j++){
                pic[j].style.display="none";
                num[j].className="";
            }
            pic[curindex].style.display="block";
            num[curindex].className="active";
            index=curindex;
        }
    }
</script>
</head>
<body>
<div id="flash">
    <ul id="pic">
        <li style="display:block">
            <img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt="">
        </li>
        <li>
            <img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt="">
        </li>
        <li>
            <img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt="">
        </li>
        <li>
            <img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt="">
        </li>
        <li>
            <img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt="">
        </li>
        <li>
            <img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt="">
        </li>
    </ul>
    <ol id="num">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
    <a href="javascript:;" id="left">&lt;</a>
    <a href="javascript:;" id="right">&gt;</a> 
</div>
</body>
</html>

转载于:https://my.oschina.net/yongqingfan/blog/522444