效果图
1.首先先看看html和css代码
<style>
*{padding:0;margin:0;}
#div1{margin:100px auto;background:red;width:712px;height:108px;position:relative;overflow:hidden;}
#div1 ul{position:absolute;left:0;top:0;}
#div1 ul li{list-style:none;float:left;width:178px;height:108px;}
#a1{display:block;width:66px;height:66px;background:url(btn.jpg) 66px 68px;
position: absolute;left:250px;top:120px; }
#a2{
display:block;width:66px;height:66px;background:url(btn.jpg) 135px 68px;position: absolute;left:1050px;top:120px; }
</style>
<body>
<a href="javascript:" id="a1"></a>
<a href="javascript:" id="a2"></a>
<div id="div1">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
</div>
</body>
js代码如下，都带有注释，大家可以自己实现再看代码
<script>
window.onload=function()
{
var oDiv =document.getElementById("div1");
var oUl =oDiv.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //增加重复的四张图片
// console.log(oUl.innerHTML); //调试用的
oUl.style.width=aLi.length * aLi[0].offsetWidth +"px"; //因为上面加了一半的图片，现在有8张图片。
// console.log(aLi.length);
var speed=2;
function overside()
{
if (oUl.offsetLeft<-oUl.offsetWidth/2) //当ul的一般向左运动，当ul将要进入div时
{
oUl.style.left=‘0‘;
}
if(oUl.offsetLeft>0) //当ul等于0，即向右运动馆将要出div的时候
{
oUl.style.left=-oUl.offsetWidth/2+‘px‘;
}
oUl.style.left=oUl.offsetLeft+speed+‘px‘;
}
var timer=setInterval(overside,30 ) ;
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(overside,30 ) ;
}
var oA=document.getElementsByTagName("a");
oA[0].onclick=function()
{
speed=-2;
}
oA[1].onclick=function()
{
speed=2;
}
};
</script>
这有点难度，希望不懂得方法和属性可以百度
时间： 2024-10-12 04:22:39