图片切换的效果



图片切换的效果,其实就是修改图片的距离。下面提供一个简单的图片切换效果。

效果主要做的是无缝切换图片。

<style>    
*{ margin:0; padding:0; list-style:none;}    
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ width:200px; height:200px; float:left; padding:5px;}    
</style>    
<script>    
window.onload=function(){    
    var oBox=document.getElementById('box');    
    var oUl=oBox.children[0];    
    var aLi=oUl.children;    
        
    //复制一份内容 ,制作出无缝的效果   
    oUl.innerHTML+=oUl.innerHTML;    
    oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
        
    setInterval(function(){   //开定时器,这样就可以自己切换,无需人工干预。
        var l=oUl.offsetLeft-10;  //图片切换,就是移动距离
        if(l<=-oUl.offsetWidth/2){    
            l=0;    
        }    
        oUl.style.left=l+'px';    
    },30);    
};    
</script>    
</head>    
<body>    
<div id="box">    
    <ul>    
       <li><img src="img/1.jpg" width="200"></li>    
       <li><img src="img/2.jpg" width="200"></li>    
       <li><img src="img/3.jpg" width="200"></li>    
       <li><img src="img/4.jpg" width="200"></li>      
   </ul>    
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值