web-图片水平无限滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
    <style>
        *{
    
    margin: 0;padding: 0;}
        #div1{
    
    
            position: relative;
            width: 1200px;
            margin: 20px auto;
            height: 240px;
            overflow: hidden;
        }
        #div1 ul{
    
    
            position: absolute;
            left: 0;
        }
        #div1 a{
    
    
            position: absolute;
            z-index: 2;
            text-decoration: none;
            top: 45%;
            display: none;
        }
        #div1 ul li{
    
    
            margin-top: 15px;
            padding: 5px;
            list-style: none;
            width: 300px;
            height: 200px;
            float: left;
        }
        #div1 ul li img{
    
    
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
    
    
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var aA = oDiv.getElementsByTagName('a');
        var iSpeed = 1;//正左负右
        var timer = null;
        //计算ul的宽为所有li的宽的和;
        oUl.innerHTML += oUl.innerHTML+oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
        function Slider(){
    
    
            if (oUl.offsetLeft<-oUl.offsetWidth/2) {
    
    
                oUl.style.left = 0;
            }else if(oUl.offsetLeft>0){
    
    
                oUl.style.left =-oUl.offsetWidth/2+'px';
            }
            oUl.style.left = oUl.offsetLeft-iSpeed+'px';//正负为方向
        }
        timer =setInterval(Slider,30);
        aA[0].onclick = function(){
    
    
            iSpeed = 1; //控制速度的正负
        }
        aA[1].onclick = function(){
    
    
            iSpeed = -1;
        }
        oDiv.onmouseover = function(){
    
    
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
    
    
            timer =setInterval(Slider,30);
        }
    };
</script>
<div id="div1">
    <ul>
        <li><img src="图片/gd1.jpg"></li>
        <li><img src="图片/gd2.jpg"></li>
        <li><img src="图片/gd3.jpg"></li>
        <li><img src="图片/gd4.jpg"></li>
        <li><img src="图片/gd5.jpg"></li>
        <li><img src="图片/gd6.jpg"></li>
        <li><img src="图片/gd7.jpg"></li>
    </ul>
    <a href="javascript:;" style="left:10px;"><</a>
    <a href="javascript:;" style="right:10px;">></a>
</div>
</body>
</html>
web-图片水平无限滚动

web-图片水平无限滚动

猜你喜欢
