當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

JavaScript实现幻灯片的简单实例(轮播图幻灯片js插件)

發布時間：2023/12/19 综合教程 21 生活家

生活随笔收集整理的這篇文章主要介紹了 JavaScript实现幻灯片的简单实例(轮播图幻灯片js插件) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在我們日常的開發工作中，經常會遇到幻燈片切換、那么我們都知道常見的幻燈片切換無非就是輪播和漸變，不管哪種都是用定時器來逐步改變圖片或者圖片組的某種屬性來實現的，今天就帶大家介紹下JavaScript實現幻燈片的簡單實例！

摒棄其他的效果，最簡單的輪播也就只有一條語句：
parent.appendChild(parent.firstChild)，不斷的把列表的一個元素添加到最后一個，appendChild會將節點從原來的位置移除，所以借此可以產生切換效果。
一點，IE對文本的文本節點與其他的瀏覽器不同，在獲取子節點的時候需要注意，另外在不同版本的FF中，children這個屬性也需要注意。
下面的demo沒有設置#view的overflow:hidden。

demo_1：

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
setInterval(function(){ 
img_list.appendChild(img_list.firstChild); 
},500) 
</script> 
</body> 
</html>

登錄后復制

（上面的demo其實可以不用浮動，僅為了后面的演示）
另一種方式就是不改變節點順序，把整個列表向某個方向移動（不斷改變列表的left屬性），
demo_2：

代碼如下:


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
img_list.style.left = 0; 
setInterval(function(){ 
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: (parseInt(img_list.style.left) - 320 + 'px'); 
},500) 
</script> 
</body> 
</html>

登錄后復制

上面的demo突兀，感覺不好，于是可以加上平滑的移動效果。
所謂平滑的移動效果其實就是把上面第二個demo的每一大步分解為若干個小的部分，把一次移動320px分成50次來執行；
demo_3：

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
img_list.style.left = 0; 
setInterval(function(){ 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
img_list.style.left = parseInt(img_list.style.left) == -640 ? 0: -pos/100 * 640+'px'; 
},(pos + 1)*10) 
})(i) 
} 
},1500) 
</script> 
</body> 
</html>

登錄后復制

對于demo_1的情況，我們可以不斷縮減firstChild的寬度，以此達到類似demo_3的效果。
demo_4

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{ float: left; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
setInterval(function(){ 
var current = img_list.children[0]; 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
current.style.width = 320 - (pos/100)*320 + 'px'; 
},(pos + 1)*10) 
})(i) 
} 
setTimeout(function(){ 
img_list.appendChild(current); 
current.style.width = '320px'; 
},1010); 
},1500) 
</script> 
</body> 
</html>

登錄后復制

上面幾種，方式原理都差不多，另外還可以設置透明漸變，讓一張圖片透明度從1國度到0 ，于是也可以產生切換效果，代碼改動也很小。
demo_5：

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0;} 
ul{ list-style: none;} 
#view{ position: relative; width: 320px; height: 120px; margin-left:320px; border: 10px solid #bc8f8f; } 
#view:after{ content: '.'; display: block; clear: both; height: 0; visibility:hidden;} 
#img_list{ position: absolute; width: 960px;} 
#img_list li{position: absolute; top:0; left: 0; width: 320px; height: 120px; } 
#a{ background: #87ceeb;} 
#b{ background: #ff69b4;} 
#c{ background: #98fb98;} 
</style> 
</head> 
<body> 
<p id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</p> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
setInterval(function(){ 
var current = img_list.children[0]; 
for(var i = 0 ; i < 100 ; i++){ 
(function(pos){ 
setTimeout(function(){ 
current.style.opacity = 1 - (pos/100)*1; 
},(pos + 1)*10) 
})(i) 
} 
setTimeout(function(){ 
img_list.appendChild(current); 
current.style.opacity = 1; 
},1010); 
},1500) 
</script> 
</body> 
</html>

登錄后復制

至于其他各種絢麗的效果，經過一些其他的組合處理就可以了。
一種處理方法就是把圖片分割成n個區域，將背景都設置為需要顯示的圖片，然后在不同的區域顯示對應的背景。這樣一來，一張100*100的圖片，可以被分割成100個10*10的小方塊，再對這些方塊來進行處理，得到的效果就會更多。理論上還可以分成10000個1*1的小點，但是瀏覽器會爆掉··
demo_6：

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ margin: 0; padding: 0; border: 0;} 
body{ padding: 50px;} 
.sep{ float: left; margin:1px 1px 0 0;} 
</style> 
</head> 
<body> 
<img id="img" src="../動畫/apple.jpg" alt="" /> 
<p id="wrap" style="position: relative; "></p> 
<script type="text/javascript"> 
var img = document.getElementById('img'); 
var wrap = document.getElementById('wrap'); 
img.onload = function(){ 
console.dir(img); 
var h = img.naturalHeight; 
var w = img.naturalWidth; 
newPanel(w,h); 
} 
function newPanel(w,h){ 
var cols = 10; 
var rows = 10; 
var colWidth = Math.floor(w/cols); 
var rowHeight = Math.floor(w/rows); 
for(var row = 0; row < rows; row++){ 
for(var col =0; col < cols; col++){ 
var p = document.createElement('p'); 
p.style.width = colWidth + 'px'; 
p.style.height= rowHeight + 'px'; 
p.className= 'sep'; 
p.style.backgroundImage = 'url(' + img.src + ')'; 
p.style.backgroundPosition = -colWidth*col +'px ' + -rowHeight*row +'px' ; 
wrap.appendChild(p); 
} 
} 
} 
setTimeout(function(){ 
setInterval(function(){ 
wrap.lastChild && wrap.removeChild(wrap.lastChild); 
},50) 
},1000) 
</script> 
</body> 
</html>

登錄后復制

演示而已，具體的寬度和排列需要自己再組織下。或者消除，或者遮罩，對應不同的排列組合，其他的方式也比較好實現。
最后，大家都懂的，CSS3也可以實現一些幻燈片效果，
demo_7:

代碼如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
*{ 
margin: 0; 
padding: 0; 
} 
#test{ 
position: relative; 
width: 300px; 
height: 200px; 
overflow: hidden; 
border: 1px solid #d4d4d4; 
} 
#test ul{ 
position: absolute; 
top:0; 
left: 0; 
height:200px; 
} 
#test ul li{ 
float: left; 
width: 300px; 
height:200px; 
} 
@-webkit-keyframes myAnimation{ 
0%{ 
top:0; 
} 
40%{ 
top:-200px; 
} 
70%{ 
top:-400px; 
} 
100%{ 
top:-600px; 
} 
} 
#test ul{ 
-webkit-animation-name:myAnimation; 
-webkit-animation-duration:4s; 
-webkit-animation-timing-function:linear; 
-webkit-animation-iteration-count:infinite; 
} 
</style> 
</head> 
<body> 
<p id="test"> 
<ul> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
<li><img width="300" height="200" src="../image/a.jpg" alt="" /></li> 
</ul> 
</p> 
</body> 
</html>

登錄后復制

總結：

本文使用了很多的實例來講解了JavaScript實現幻燈片的操作，相信小伙伴么通過對本文的學習，對幻燈片的實現以有了一定的了解！

相關推薦：

php+javascript幻燈片生成代碼

javascript實現圖片切換的幻燈片效果源代碼

JS實現淘寶幻燈片效果的實現方法

以上就是JavaScript實現幻燈片的簡單實例的詳細內容，更多請關注風君子博客其它相關文章！

總結

以上是生活随笔為你收集整理的JavaScript实现幻灯片的简单实例(轮播图幻灯片js插件)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [转]notepad++ java编码，
下一篇：空调的风是室内的还是室外的(如何选择空调