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