無縫滾動
效果預覽:
效果分析:
1.4張圖片輪播
2.鼠標懸浮輪播暫停,鼠標移開輪播繼續
3.默認從左到右輪播
4.點擊左箭頭,往左輪播,再點擊右箭頭,往右輪播
<!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" />
<title>無標題文檔</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
float: left;
width: 896px;
height: 105px;
background: red;
margin: auto;
position: relative;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li {
width: 224px;
height: 105px;
float: left;
list-style: none;
}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var spend=2;
// //爲了實現無縫滾動效果,將4張圖片和自身拼接,改成8張
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
//oUl的寬度等於(li個數*li寬度)
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
function run()
{
//往左移動,當左移動一半的時候,把left設置爲0
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
//往右移動,當右移動一半的時候,把left設爲總寬的一半
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+spend+'px';
}
var timer=setInterval(run,30);
oDiv.οnmοuseοver=function(){
clearInterval(timer);
};
oDiv.οnmοuseοut=function(){
timer=setInterval(run,30);
}
oLeft.οnmοuseοver=function(){
oLeft.src='left1.png';
}
oLeft.οnmοuseοut=function(){
oLeft.src='left.png';
}
oRight.οnmοuseοver=function(){
oRight.src='right1.png';
}
oRight.οnmοuseοut=function(){
oRight.src='right.png';
}
oLeft.οnclick=function(){
spend=-2;
}
oRight.οnclick=function(){
spend=2;
}
};
</script>
</head>
<body >
<div style="width:1300px;height:auto;background:red;margin:auto auto">
<img id="left" src="left.png" style="float:left;width:200px;height:105px;"/>
<div id="div1">
<ul>
<li><img src="1.png" /></li>
<li><img src="2.png" /></li>
<li><img src="3.png" /></li>
<li><img src="4.png" /></li>
</ul>
</div>
<img id="right" src="right.png" style="float:left;width:200px;height:105px;"/> </div>
</body>
</html>