图片切换的效果

最新推荐文章于 2025-06-09 14:32:56 发布

转载最新推荐文章于 2025-06-09 14:32:56 发布 · 407 阅读

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

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

<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>