免費(fèi)AI編程助手
今天我們來(lái)說(shuō)說(shuō)“在javascript中怎么做圖片滾動(dòng)？”。那么我們要搞清楚這個(gè)的原理。我們?cè)O(shè)計(jì)一個(gè)圖片滾動(dòng)的話原理是通過(guò)復(fù)制ul標(biāo)簽的內(nèi)容，讓它實(shí)現(xiàn)一個(gè)左右的滾動(dòng)。我們來(lái)看看接下來(lái)怎么做吧！
1.首先我們通過(guò)設(shè)置一個(gè)網(wǎng)頁(yè)框架代碼如下：
<html>
<head>
<meta charset="utf-8" />
<title>javascript怎么做圖片滾動(dòng)</title>
</head>
<link rel="stylesheet" href="css/gundong.css" />
<script type="text/javascript"src="js/gundong.js"></script>
<body>
<div id="div1">
<ul>
<li><img src="img/GIF-1.png"></li>
<li><img src="img/gif-2.png"></li>
<li><img src="img/gif-3.png"></li>
<li><img src="img/gif-4.png"></li>
</ul>
</div>
<a href="javascript:;">向左滾動(dòng)</a>
<a href="javascript:;">向右滾動(dòng)</a>
</body>
</html>這樣我們就完成了一個(gè)網(wǎng)頁(yè)的框架內(nèi)容，我們也設(shè)置了一個(gè)css的外聯(lián)式和JavaScript的外聯(lián)式的語(yǔ)句。
2.設(shè)置css樣式完成靜態(tài)頁(yè)面的設(shè)置，代碼如下：
body,
div,
ul,
li,
p {
padding: 0;
margin: 0;
}
#div1 {
position: relative;
margin: 10px auto;
border: 1px solid black;
width: 680px;
height: 170px;
overflow: hidden;
}
#div1 ul {
position: absolute;
left: 0;
}
#div1 ul li {
float: left;
padding: 10px;
list-style: none;
width: 150px;
height: 150px;
}
#div1 ul li img {
width: 150px;
height: 150px;
}
當(dāng)我們完成這個(gè)步驟的時(shí)候就會(huì)得到一個(gè)靜態(tài)的頁(yè)面，那么接下來(lái)就是讓頁(yè)面動(dòng)起來(lái)。
3.添加javascript的內(nèi)容實(shí)現(xiàn)一個(gè)頁(yè)面效果代碼如下：
window.onload = function()
{
var oDiv = document.getElementById("div1");
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
var oA = document.getElementsByTagName("a");
var timer = null;
var iSpeed = 8;
//復(fù)制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的寬度是所有l(wèi)i寬度之和，復(fù)制ul之后的整個(gè)ul的寬度就是li的長(zhǎng)度乘以一個(gè)li的寬度
oUl.style.width = oLi.length*oLi[0].offsetWidth + "px";
function fnMove()
{
//圖片向左移動(dòng)時(shí)的條件，即在div里的ul的offsetLeft小于一個(gè)ul的寬度
if (oUl.offsetLeft<-oUl.offsetWidth/2)
{
//將整個(gè)復(fù)制的ul向右拖拽直至整個(gè)ul中的第一張圖歸位到起點(diǎn)
oUl.style.left = 0;
}
//圖片向右移動(dòng)時(shí)的條件，即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft>=0)
{
//將整個(gè)復(fù)制的ul向左拖拽直至整個(gè)ul中的第一張圖歸位到起點(diǎn)
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//給ul一個(gè)速度讓整個(gè)ul的offsetLeft增加或減少，速度為正則向右移動(dòng)，速度為負(fù)則向左移動(dòng)
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
//點(diǎn)擊向左滾動(dòng)即觸發(fā)第一個(gè)a元素標(biāo)簽
oA[0].onclick = function()
{
iSpeed = -8;
}
//點(diǎn)擊向右滾動(dòng)即觸發(fā)第二個(gè)a元素標(biāo)簽
oA[1].onclick = function()
{
iSpeed = 8;
}
//當(dāng)鼠標(biāo)移動(dòng)到div里面的時(shí)候圖片滾動(dòng)暫停，此時(shí)清除定時(shí)器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//當(dāng)鼠標(biāo)移出div的時(shí)候圖片繼續(xù)滾動(dòng)，此時(shí)重新加載定時(shí)器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}在代碼中我們通過(guò)設(shè)置函數(shù)，在頁(yè)面中我們可以通過(guò)點(diǎn)擊向那個(gè)方向滾動(dòng)從而實(shí)現(xiàn)，滾動(dòng)的一個(gè)方向（默認(rèn)是向右）。而且當(dāng)我們鼠標(biāo)停留在滾動(dòng)的圖片時(shí)會(huì)停止?jié)L動(dòng)。
總結(jié)：
上面就是一個(gè)有關(guān)于在javascript中怎么做圖片滾動(dòng)？的一個(gè)方法，當(dāng)然如果你有更好更簡(jiǎn)便的方式也可以和大家一起分享噢！更多的一個(gè)有關(guān)于學(xué)習(xí)前端的知識(shí)，我們都可以在W3cschool中進(jìn)行學(xué)習(xí)。
