版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/kese7952/article/details/80177295
JavaScript案例之跑馬燈左右無縫連接配接
效果圖：
思路：
1.先做界面
1.1 制作一個大盒子，進行存放整個圖檔及按鈕區域
1.2 制作兩個按鈕和中間區域盒子
1.3 中間區域盒子中使用無序清單進行排放圖檔，并且每個圖檔可以作為一個連結進行點選
2..CSS
2.1 清除全局的外邊距和内邊距
2.2 去除無序清單的黑點
2.3 去除存放圖檔區域的邊界線
2.4 确定大盒子的寬高和位置【寬、高、上下空出50像素，水準居中、絕對定位】
2.5 左、按鈕的樣式【塊級顯示、寬、高、背景圖檔及平鋪位置、絕對定位、上、左】
2.6 左按鈕懸浮後樣式【背景圖檔及平鋪位置】
2.7 右、按鈕的樣式【塊級顯示、寬、高、背景圖檔及平鋪位置、絕對定位、上、左】
2.8 右按鈕懸浮後樣式【背景圖檔及平鋪位置】
2.9 中間盒子定位
2.10 中間盒子懸浮效果
3..JavaScript
3.1根據不同的标簽名稱去擷取不同的元素
...{尚未寫完，稍後補上}
參考代碼：
Html代碼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript案例之跑馬燈左右無縫連接配接</title>
</head>
<body>
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn_left"></a>
<a href="javascript:void(0);" class="btn_right"></a>
<div class="wrap">
<ul>
<li><a href="http://teach.javabs.cn/"><img src="img/1.jpg" alt="楊校老師線上課堂開課了" /></a></li>
<li><a href="http://teach.javabs.cn/"><img src="img/2.jpg" alt="楊校老師線上課堂開課了"/></a></li>
<li><a href="http://teach.javabs.cn/"><img src="img/3.jpg" alt="楊校老師線上課堂開課了"/></a></li>
<li><a href="http://teach.javabs.cn/"><img src="img/4.jpg" alt="楊校老師線上課堂開課了"/></a></li>
</ul>
</div>
</div>
</body>
</html> CSS代碼
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
}
.roll {
width: 880px;
height: 108px;
margin: 50px auto 0;
position: relative;
}
.btn_left {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat -70px -69px;
position: absolute;
top: 20px;
left: 1px;
z-index: 1;
}
.btn_left:hover {
background: url(img/btn.jpg) no-repeat -70px 0;
}
.btn_right {
display: block;
width: 68px;
height: 68px;
background: url(img/btn.jpg) no-repeat 1px -69px;
position: absolute;
top: 20px;
right: 0;
z-index: 1;
}
.btn_right:hover {
background: url(img/btn.jpg) no-repeat 1px 0;
}
.roll .wrap {
width: 728px;
height: 108px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.roll ul {
position: absolute;
top: 0;
left: 0;
}
.roll li {
float: left;
width: 182px;
height: 108px;
text-align: center;
}
.roll li a:hover {
position: relative;
top: 2px;
}
.control {
border-bottom: 1px solid #ccc;
background: #eee;
text-align: center;
padding: 20px 0;
} JavaScript代碼
window.onload = function() {
var oDiv = document.getElementById('roll');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn = oDiv.getElementsByTagName('a'); //擷取按鈕
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
var speed = -5;
var time = null;
time = setInterval(function() {
oUl.style.left = oUl.offsetLeft + speed + 'px';
//alert(oUl.offsetWidth)//-728
//alert(oUl.offsetLeft)//-5
if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = 0 + 'px';
} else if(oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
}
}, 30);
oBtn[0].onmouseover = function() {
speed = -5;
};
oBtn[1].onmouseover = function() {
speed = 5;
};
oUl.onmouseover = function() {
clearInterval(time);
}
oUl.onmouseout = function() {
time = setInterval(function() {
oUl.style.left = oUl.offsetLeft + speed + 'px';
if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = 0 + 'px';
} else if(oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + 'px';
};
}, 30);
}
}; 圖檔素材分享：
作者： 楊校
出處：
http://blog.csdn.net/kese7952分享是快樂的，也見證了個人成長曆程，文章大多都是工作經驗總結以及平時學習積累，基于自身認知不足之處在所難免，也請大家指正，共同進步。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 如有問題， 可郵件（[email protected]）咨詢。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)