無縫滾動的結構：一共兩個盒子，第一個大盒子下套第二個大盒子，第二個大盒子下有4張圖片，第一個大盒子寬度固定為600px，第二個大盒子寬度是400%;
原理：第一個盒子相對浮動，第二個盒子絕對浮動，讓第二個盒子的left值一直變化。當left值小于等于4張圖片的寬度的時候，讓left值瞬間歸0，用戶看不到，以為是無縫滾動。
例子：
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 200px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
border: 3px solid red;
position: relative;
}
.box ul{
width: 400%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.box ul li{
list-style: none;
float: left;
}
.box ul li img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class=”box” id=”myscroll”>
<ul>
<li><img src=”images/1.jpg” alt=””/></li>
<li><img src=”images/2.jpg” alt=””/></li>
<li><img src=”images/3.jpg” alt=””/></li>
<li><img src=”images/4.jpg” alt=””/></li>
<li><img src=”images/1.jpg” alt=””/></li>
<li><img src=”images/2.jpg” alt=””/></li>
</ul>
</div>
</body>
</html>
<script>
var myscroll = document.getElementById(“myscroll”);
var myscroll_ul = myscroll.children[0];
var num = 0; //控制左側值 left
var timer = null;//定時器
timer = setInterval(autoPlay,10);
function autoPlay(){
num–;
num<=-1200 ? num = 0 : num ;
myscroll_ul.style.left=num+”px”;
myscroll.onmouseover = function () {
clearInterval(timer);//鼠標經過大盒子 停止定時器timer
}
myscroll.onmouseout = function(){
timer = setInterval(autoPlay,10); //開啟定時器 名字還是叫timer
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
注意：如果圖片有4張的話，代碼里需要寫6張，第5，6兩張是復制的第1，2兩張；
相關推薦
自己如何建立一個網站（最簡單的HTML建站的代碼和建站方法）
無論是個人還是企業，如果沒有接觸過建站的話，一般都很想知道如何從零開始搭建自己的網站，都有哪些步驟？每一步需要做什么？網站是怎么做出來和上線的？ 企業建站的基礎3元素，分別是域名，…
HTML5從入門到精通的書籍（附：html5學習VIP視頻教程）
隨著科學技術與信息技術急速地發展，IT行業不僅需要理論知識，更需要技術過硬、綜合能力強的實用性人才。為了解決高校畢業生求職時常常因技術經驗不足而被拒之門外這一現象的問題，由千鋒教研…
學校網站模板免費下載（教育網站html源碼）
現如今網站建設真是越來越簡單了，只需要套用網站模板就可以完成網站建設，所以現在大部分的企業都會有自己專屬的網站，當用戶有需要的時候就會前往這些網站進行瀏覽。如今的社會對教育是比較看…
html網站制作案例（精選20個網站建設成功模板）
很多初學者喜歡自己看安裝視頻，研究如何搭建一個網站，因為這樣不僅能夠學到一些關于網站建設的一些基礎知識，還能夠省下一大筆成本。其實如果是搭建一個模板網站并不需要會太高端的編程技術，…
卡片式布局的優點有哪些，html如何實現卡片布局
UI布局有許多種形式，而卡片式作為目前比較常見的一種，也有著它適用和不適用的場景 前言：哪些是卡片 說到卡片式設計，大家的第一反應可能是下面這樣的頁面。 而從廣義上來說，以分隔條分…
個人網站制作方法有哪些，html個人網頁制作步驟
建一個自己的網站的想法很早就有了，可無奈非科班，一些基礎的東西并不了解，就一直擱置著。之后又經歷過不少幾次的嘗試和失敗，又在他人的幫助下，有了確切的方向，開始了自己網站運營的摸索之…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。