码迷,mamicode.com
首页 > 其他好文 > 详细

华为轮播图

时间:2015-02-04 16:50:29      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:background   absolute   position   relative   display   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style type="text/css">
*{ padding:0; margin:0;}
li{ list-style:none;}
#div1{ min-width:1000px; height:400px; position:relative; overflow:hidden;}
#div1 ul{ left:0; position:absolute;}
#div1 ul li{ float:left;}
#div1 ul li img{ position:relative;}

#btn{ position:absolute; bottom:10px; text-align:center; width:100%;}
#btn a{ width:11px; height:11px; background:#666; cursor:pointer; display:inline-block;}
#btn a:hover,#btn a.active{ background:#FFF;}

*html .ie6_out{ margin-left:1000px;zoom:1;}
*html .ie6_in{ position:relative; float:left; margin-left:-1000px;}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);
    var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
    var aLi = oDiv.getElementsByTagName(‘li‘);
    var aImg = oDiv.getElementsByTagName(‘img‘);
    
    var oBtn = document.getElementById(‘btn‘);
    var aA = oBtn.getElementsByTagName(‘a‘);
    
    var imgWidth = 1920;
    var iNow = 0;
    var iNow2 = 0;
    
    oUl.style.width = imgWidth*aImg.length + ‘px‘;
    
    function toResize(){
        var viewWidth = document.documentElement.clientWidth;
        if(viewWidth>1000){
            for (var i = 0; i<aImg.length;i++){
                aImg[i].style.left = -(imgWidth - viewWidth)/2 + ‘px‘;
            }
        }
    }
    toResize();
    window.onresize = function(){
        toResize();
    }
    
    for(var i = 0; i<aA.length;i++){
        aA[i].index = i;
        aA[i].onclick = function(){
            for(var i = 0; i<aA.length;i++){
                aA[i].className = ‘‘;
            }
            this.className = ‘active‘;
            startMove(oUl,{left: -this.index*imgWidth});
        }
    }
    setInterval(toRun,3000);
    function toRun(){
        if(iNow == aLi.length - 1){
            iNow = 0;    
            aLi[0].style.position = ‘relative‘;
            aLi[0].style.left = aImg.length * imgWidth + ‘px‘;
        }
        else{
            iNow++;
        }
        iNow2++;
        for(var i = 0; i<aA.length;i++){
                aA[i].className = ‘‘;
            }
        aA[iNow].className = ‘active‘;
        startMove(oUl,{left: -iNow2*imgWidth},function(){
            if(iNow == 0){
                aLi[0].style.position = ‘static‘;
                oUl.style.left = 0;
                iNow2 = 0;
            }
        });
    }
}
</script>
</head>

<body>
<!--[if lte IE 6]>
<div class = "ie6_out">
<div class = "ie6_in">
<![endif]-->
<div id="div1">
    <ul>
        <li><img src="语诺健康/images/3.jpg"></li>
        <li><img src="语诺健康/images/4.jpg"></li>
        <li><img src="语诺健康/images/6.jpg"></li>
        <li><img src="语诺健康/images/7.jpg"></li>
    </ul>
    <div id="btn">
        <a href="javascript:;" class="active"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
<!--[if lte IE 6]>
</div>
</div>
<![endif]-->
</body>
</html>

华为轮播图

标签:background   absolute   position   relative   display   

原文地址:http://jiuyuechumei.blog.51cto.com/7217281/1611509

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!