轮播图 ①

最新推荐文章于 2022-09-09 11:58:57 发布

isCcccccc

最新推荐文章于 2022-09-09 11:58:57 发布

阅读量165

点赞数

分类专栏：代码~

本文链接：https://blog.csdn.net/isCaiweiqi/article/details/82349220

版权

代码~ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #container{
            width: 680px;
            height: 344px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        #tab{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #tab li{
            width: 20px;
            height: 20px;
            background: #000000;
            color: #fff;
            text-align: center;
            line-height: 20px;
            float: left;
            margin-right: 5px;
            cursor: pointer;
        }
        #tab li.selected{
            background: orange;
        }
        #prev-btn, #next-btn{
            position: absolute;
            bottom: 10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: #000000;
            color: #fff;
        }
        #prev-btn{
            left: 10px;
        }
        #next-btn{
            left: 35px;
        }

        #img-box{
            width: 2720px;
            position: absolute;
        }
        #img-box img{
            float: left;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="img-box">
        <img class="selected" src="img/1.jpg" alt=""/>
        <img src="img/2.jpg" alt=""/>
        <img src="img/3.jpg" alt=""/>
        <img src="img/4.jpg" alt=""/>
    </div>
    <ul id="tab">
        <li class="selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span id="prev-btn">&lt;</span>
    <span id="next-btn">&gt;</span>
</div>
<script src="../jslib.js"></script>
<script>
    var oContainer = document.getElementById('container');
    var oTab = document.getElementById('tab');
    var aLi = oTab.getElementsByTagName('li');
    var oImgBox = document.getElementById('img-box');
    var aImg = oImgBox.getElementsByTagName('img');
    var oNextBtn = document.getElementById('next-btn');
    var oPrevBtn = document.getElementById('prev-btn');

    for(var i=0; i<aLi.length; i++){
        aLi[i].index = i;
        aLi[i].onmouseover = function(){
            for(var j=0; j<aLi.length;j++){
                aLi[j].className = '';
            }
            this.className = 'selected';
            //0   0
            //1   680
            //2    2*680
            animate(oImgBox,{left:-this.index * 680});
            //oImgBox.style.left = -this.index * 680 +"px";
        }
    }
</script>

</body>
</html>

isCcccccc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图 ①

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ padding: 0;
复制链接

扫一扫

专栏目录