仿淘宝轮播图，需要运动框架

最新推荐文章于 2018-12-03 09:11:00 发布

weixin_34357962

最新推荐文章于 2018-12-03 09:11:00 发布

阅读量142

点赞数

原文链接：https://yq.aliyun.com/articles/486491

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 520px; height: 280px; border: 1px solid #000; margin: 100px auto 0; position: relative; overflow: hidden;}
#ul1 { position: absolute; left: 0; top: 0; margin: 0; padding: 0;}
li { list-style: none; float: left;}
img { display: block;}
#div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px;}
#div1 p span {padding: 2px 9px; background: #CCC; border-radius: 50%; margin-left: 5px; cursor: pointer;}
#div1 p span.current { background:#F90;}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var aSpan = oDiv.getElementsByTagName('span');
    
    var iLen = aLi.length;
    var iWidth = aLi[0].offsetWidth;
    
    oUl.style.width = iLen * iWidth + 'px';
    
    for (var i=0; i<iLen; i++) {
        
        aSpan[i].index = i;
        
        aSpan[i].onclick = function() {
            
            for (var i=0; i<iLen; i++) {
                aSpan[i].className = '';
            }
            
            this.className = 'current';
            
            //oUl.style.left = -this.index * iWidth + 'px';
            
            startMove(oUl, {
                left : -this.index * iWidth
            });
            
        }
        
    }
    
}
</script>
</head>

<body>
    <div id="div1">
        <ul id="ul1">
            <li><img src="images/1.png" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
        <p>
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </div>
</body>
</html>

weixin_34357962

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝轮播图，需要运动框架

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {w...
复制链接

扫一扫