简单的图片轮播（重要的是思想）

最新推荐文章于 2022-10-24 12:10:27 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2022-10-24 12:10:27 发布

阅读量1.6k

点赞数

分类专栏： JavaScript积跬步至千里文章标签： js图片轮播

本文链接：https://blog.csdn.net/wstpa/article/details/45825861

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style type="text/css">
    * {margin:0;padding: 0}
    ul {list-style: none;}
    img {border: none;}
    #box {width: 800px;height: 360px;margin:30px auto;position: relative;}
    #box ul {position: absolute;left: 0;top: 0;width: 800px;height: 360px}
    #box ul li {width: 800px;height: 360px;display: none;}
    #box ul li.active {display: block;}
    #box p {width: 800px;height: 10px;text-align: center;position: absolute;bottom: -20px}
    #box p span {display:inline-block;width: 100px;height: 10px;margin-left: 20px;background: blue;cursor: pointer;}
    #box p span.btn {background: red}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById('box');
        var aLi=oBox.getElementsByTagName('li');
        var aSpan=oBox.getElementsByTagName('span');
        var iNow=0;
        var timer=null;
        for (var i = 0; i < aSpan.length; i++) {
            aSpan[i].index=i;
            aSpan[i].onclick=function(){
                iNow=this.index;
                tab();
            }
        }
        function tab(){
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].className='';
                aLi[i].className='';
            }
            aSpan[iNow].className="btn";
            aLi[iNow].className="active";
        }
        function next(){
            iNow++;
            if(iNow==aSpan.length){
                iNow=0;
            }
            tab();
        }
        timer=setInterval(next,3000);
        oBox.onmouseover=function(){
            clearInterval(timer);
        }
        oBox.onmouseout=function(){
            timer=setInterval(next,3000);
        }

    }
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active"><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
        </ul>
        <p><span class="btn"></span><span></span><span></span><span></span></p>
    </div>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简单的图片轮播（重要的是思想）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;} #
复制链接

扫一扫