溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“javascript中如何做圖片滾動”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“javascript中如何做圖片滾動”文章吧。
1.首先我們通過設置一個網頁框架代碼如下：
<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>這樣我們就完成了一個網頁的框架內容，我們也設置了一個css的外聯式和JavaScript的外聯式的語句。
2.設置css樣式完成靜態頁面的設置，代碼如下：
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;
}當我們完成這個步驟的時候就會得到一個靜態的頁面，那么接下來就是讓頁面動起來。
3.添加javascript的內容實現一個頁面效果代碼如下：
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;
//復制一遍ul
oUl.innerHTML +=oUl.innerHTML;
//ul的寬度是所有li寬度之和，復制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)
{
//將整個復制的ul向右拖拽直至整個ul中的第一張圖歸位到起點
oUl.style.left = 0;
}
//圖片向右移動時的條件，即在div里的ul的offsetLeft大于等于0
else if (oUl.offsetLeft>=0)
{
//將整個復制的ul向左拖拽直至整個ul中的第一張圖歸位到起點
oUl.style.left = -oUl.offsetWidth/2 + "px";
}
//給ul一個速度讓整個ul的offsetLeft增加或減少，速度為正則向右移動，速度為負則向左移動
oUl.style.left = oUl.offsetLeft +iSpeed + "px";
}
//點擊向左滾動即觸發第一個a元素標簽
oA[0].onclick = function()
{
iSpeed = -8;
}
//點擊向右滾動即觸發第二個a元素標簽
oA[1].onclick = function()
{
iSpeed = 8;
}
//當鼠標移動到div里面的時候圖片滾動暫停，此時清除定時器即可。
oDiv.onmouseover = function()
{
clearInterval(timer);
}
//當鼠標移出div的時候圖片繼續滾動，此時重新加載定時器。
oDiv.onmouseout = function()
{
timer=setInterval(fnMove,30);
}
}在代碼中我們通過設置函數，在頁面中我們可以通過點擊向那個方向滾動從而實現，滾動的一個方向（默認是向右）。而且當我們鼠標停留在滾動的圖片時會停止滾動。
以上就是關于“javascript中如何做圖片滾動”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
