美文网首页
作业2---Taobao Commodity Show

作业2---Taobao Commodity Show

作者: 不惧黑夜 | 来源:发表于2018-02-26 22:03 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="tea_reset.css">
        <style>
            .show{
                margin: 50px auto 0;
                border: 1px solid #FF6300;
                width: 304px;
                height: 206px;
            }
    
            .show ul{
                display: inline-block;
                margin: 5px;
            }
    
            .show li{
                border: 1px solid #FFADAD;
                padding: 5px;
                width: 40px;
                height: 16px;
                line-height: 16px;
                text-align: center;
            }
            
            .show li.active{
                background-color: #FF4A6B;
                color: white;
            }
            
            .show li a{
                display: block;
                color: inherit;
                text-decoration: none;
            }
    
            .show img{
                vertical-align: top;
                margin: 5px -4px 0;
            }
        </style>
    
        <script>
            window.onload = function () {
                var oImg = document.getElementsByTagName('img');
                var oLis = document.getElementsByTagName('li');
    
                for (var i = 0; i < oLis.length; i++){
                    oLis[i].index = i;
                }
    
                var activeIndex = 0;//记录当前定时显示的商品序号
                var autoChange = function () {
                    for(var i of oLis){
                        i.className = '';
                    }
    
                    
                    if(activeIndex < 7){
                        var newIndex = activeIndex;
                    }else {
                        var newIndex = 20 - activeIndex;//为了实现 U 型的播放顺序
                    }
    
                    oLis[newIndex].className = 'active';
                    oImg[0].src = `${newIndex + 1}.png`;
    
                    activeIndex++;
                    activeIndex %= oLis.length;//实现循环播放
                }
    
                var timerID = setInterval(autoChange,1000);
    
                for(var i of oLis){
                    i.onmouseover = function () {
                        clearInterval(timerID);
    
                        for(var i of oLis){
                            i.className = '';
                        }
    
                        this.className = 'active';
                        oImg[0].src =  `${this.index + 1}.png`;
                    }
    
                    i.onmouseout = function () {
                        for(var i of oLis){
                            i.className = '';
                        }
                        timerID = setInterval(autoChange,1000);
                    }
                }
            }
        </script>
    </head>
    <body>
    <div class="show">
        <ul>
            <li><a href="#">连衣裙</a></li>
            <li><a href="#">雪纺</a></li>
            <li><a href="#">T恤</a></li>
            <li><a href="#">铅笔裤</a></li>
            <li><a href="#">婚纱</a></li>
            <li><a href="#">外套</a></li>
            <li><a href="#">连体裤</a></li>
        </ul>
        <img src="1.png">
        <ul>
            <li><a href="#">包包</a></li>
            <li><a href="#">凉鞋</a></li>
            <li><a href="#">单鞋</a></li>
            <li><a href="#">太阳镜</a></li>
            <li><a href="#">丝袜</a></li>
            <li><a href="#">帆布鞋</a></li>
            <li><a href="#">情侣装</a></li>
        </ul>
    
    </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:作业2---Taobao Commodity Show

          本文链接:https://www.haomeiwen.com/subject/hnsuxftx.html