小呀小番茄 2021-07-04 22:46 采纳率: 100%
浏览 57
已采纳

JavaScript实现轮播图

1.假设html、css您已经完成，使用JavaScript编写一个简单的轮播图，能实现按下左按钮或者右按钮移动图片即可，不需要无缝轮播。

img

  • 写回答

3条回答 默认 最新

  • 一只熊的北极 2021-07-05 16:53
    关注

    完整的js轮播，自动轮播，按钮控制

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
    <title>Document</title>
    <link rel="stylesheet" href=""/>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            text-decoration:none;
            font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
        }
        body{
                background:#eee;
        }
        #Bigbox{
                width:720px;
                height:420px;
                border:1px solid #333;
                margin:60px auto;
        }
        #Box{
                width:700px;
                height:400px;
                position:relative;
                overflow: hidden;
                top:10px;
                left:10px;
        }
        #Ul{
                height:400px;
                position:absolute;
                top:0;
                left:0;
        }
        #Ul li{
                width:700px;
                height:400px;
                float:left;
        }
        #Left{
                width:60px;
                height:50px;
                border-radius:30%;
                background:rgba(96,96,96,.5);
                position:absolute;
                top:50%;
                left:0;
                margin-top:-25px;
                color:#fff;
                line-height:50px;
                text-align:center;
                cursor:pointer;
                font-size:20px;
                display:none;
        }
        #Right{
                width:60px;
                height:50px;
                border-radius:30%;
                background:rgba(96,96,96,.5);
                position:absolute;
                top:50%;
                right:0;
                margin-top:-25px;
                color:#fff;
                line-height:50px;
                text-align:center;
                cursor:pointer;
                font-size:20px;
                display:none;
        }
    </style>
   
</head>
<body>
        <div id="Bigbox">
                <div id="Box">
                        <ul id="Ul">
                                <li>
                                        <img src="img/1.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/2.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/3.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/4.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/5.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/6.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/7.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/8.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/9.jpg" width="100%" height="100%">
                                </li>
                                <li>
                                        <img src="img/10.jpg" width="100%" height="100%">
                                </li>
                        </ul>


                        <div id="Left" onselectstart="return false">左</div>
                        <div id="Right" onselectstart="return false">右</div>
                </div>
        </div>
        <script>
         window.onload = function(){
                 var n = 0;
                 var timer = null;
                 var timer1 = null;
                 var timer2 = null;
                 var timer3 = null;
                 var oDiv = document.getElementById('Box')
                 var oUl = document.getElementById('Ul')
                 var oLi = oUl.getElementsByTagName('li')
                 //获取div宽度
                 var oDivWidth = getStyle(oDiv,'width').split('px')[0]                 //复制oUl的innerHTML
                  oUl.innerHTML+= oUl.innerHTML
                  //设置ul宽度
                 oUl.style.width = oLi.length*oDivWidth+'px'
                 //获取ul宽度
                 var oUlWidth = getStyle(oUl,'width').split('px')[0]                 //封装获取非行间样式函数
        function getStyle(obj,sName){
                        if(obj.currentStyle){
                                return obj.currentStyle[sName];
                        }else{
                                return getComputedStyle(obj,false)[sName];
                        }
                }
                //执行函数
                clearInterval(timer3)
                timer3 = setInterval(function(){
                        Run()
                },2000)
                //封装运动函数
                function Run(){
                        clearInterval(timer)
                        timer = setInterval(function(){
                                n-=20;
                                oUl.style.left = n+'px'
                                if(n%oDivWidth==0){
                                        clearInterval(timer3)
                                        clearInterval(timer)
                                        clearInterval(timer1)
                                        timer1 = setTimeout(function(){
                                                Run()
                                        },2000)
                                }
                                if(n<=-oUlWidth/2){
                                        oUl.style.left = 0;
                                        n=0;
                                        clearInterval(timer3)
                                        clearInterval(timer)
                                        clearInterval(timer1)
                                        timer1 = setTimeout(function(){
                                                Run()
                                        },2000)
                                }
                        },30)        
                }

                //鼠标移入停止滚动
                oDiv.onmouseover = function(){
                        Left.style.display = 'block'
                        Right.style.display = 'block'
                        clearInterval(timer3)
                        clearInterval(timer2)
                        timer2 = setInterval(function(){
                                if(n%oDivWidth==0){
                                        clearInterval(timer)
                                        clearInterval(timer1)
                                }
                        },30)
                        
                }

                //鼠标移出继续执行
                oDiv.onmouseout = function(){
                        Left.style.display = 'none'
                        Right.style.display = 'none'
                        clearInterval(timer3)
                        clearInterval(timer2)
                        clearInterval(timer1)
                        timer1 = setTimeout(function(){
                                Run()
                        },2000)
                }

                //向左
                Left.onclick = function(){
                        //清除所有定时器
                        clearInterval(timer)
                        clearInterval(timer1)
                        clearInterval(timer2)
                        clearInterval(timer3)
                        timer = setInterval(function(){
                                n-=50;
                                oUl.style.left = n+'px'
                                if(n%oDivWidth==0){
                                        clearInterval(timer)
                                }
                                if(n<=-oUlWidth/2){
                                        oUl.style.left = 0;
                                        n=0;
                                }
                        },30)
                }

                //向右
                Right.onclick = function(){
                        clearInterval(timer)
                        clearInterval(timer1)
                        clearInterval(timer2)
                        clearInterval(timer3)
                        if(n==0){
                                n=-oUlWidth/2
                        }
                        clearInterval(timer)
                        timer = setInterval(function(){
                                n+=50;
                                oUl.style.left = n+'px'
                                if(n%oDivWidth==0){
                                        clearInterval(timer)
                                }
                        
                        },30)
                }
        }
        //哈哈
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 各位请问平行检验趋势图这样要怎么调整？说标准差差异太大了
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 wpf界面一直接收PLC给过来的信号，导致UI界面操作起来会卡顿
  • ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
  • ¥15 运动想象脑电信号数据集.vhdr
  • ¥15 三因素重复测量数据R语句编写，不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab