html 幻灯片原理,js幻灯片
常見的幻燈片切換無非就是輪播和漸變，不管哪種都是用定時器來逐步改變圖片或者圖片組的某種屬性來實現的。摒棄其他的效果，最簡單的輪播也就只有一條語句：parent.appendChild(parent.firstChild)，不斷的把列表的一個元素添加到最后一個，appendChild會將節點從原來的位置移除，所以借此可以產生切換效果。
一點，IE對文本的文本節點與其他的瀏覽器不同，在獲取子節點的時候需要注意，另外在不同版本的FF中，children這個屬性也需要注意。
下面的demo沒有設置#view的overflow:hidden。
demo_1：
代碼如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ 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;}
var img_list = document.getElementById('img_list');
setInterval(function(){
img_list.appendChild(img_list.firstChild);
},500)
(上面的demo其實可以不用浮動，僅為了后面的演示)
另一種方式就是不改變節點順序，把整個列表向某個方向移動(不斷改變列表的left屬性)，
demo_2：
代碼如下:
*{ 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;}
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)
上面的demo突兀，感覺不好，于是可以加上平滑的移動效果。
所謂平滑的移動效果其實就是把上面第二個demo的每一大步分解為若干個小的部分，把一次移動320px分成50次來執行；
demo_3：
代碼如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ 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;}
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)
對于demo_1的情況，我們可以不斷縮減firstChild的寬度，以此達到類似demo_3的效果。
demo_4
代碼如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ 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;}
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)
上面幾種，方式原理都差不多，另外還可以設置透明漸變，讓一張圖片透明度從1國度到0 ，于是也可以產生切換效果，代碼改動也很小。
demo_5：
代碼如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ 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;}
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)
至于其他各種絢麗的效果，經過一些其他的組合處理就可以了。
一種處理方法就是把圖片分割成n個區域，將背景都設置為需要顯示的圖片，然后在不同的區域顯示對應的背景。這樣一來，一張100*100的圖片，可以被分割成100個10*10的小方塊，再對這些方塊來進行處理，得到的效果就會更多。理論上還可以分成10000個1*1的小點，但是瀏覽器會爆掉··
demo_6：
代碼如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*{ margin: 0; padding: 0; border: 0;}
body{ padding: 50px;}
.sep{ float: left; margin:1px 1px 0 0;}
?
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 div = document.createElement('div');
div.style.width = colWidth + 'px';
div.style.height= rowHeight + 'px';
div.className= 'sep';
div.style.backgroundImage = 'url(' + img.src + ')';
div.style.backgroundPosition = -colWidth*col +'px ' + -rowHeight*row +'px' ;
wrap.appendChild(div);
}
}
}
setTimeout(function(){
setInterval(function(){
wrap.lastChild && wrap.removeChild(wrap.lastChild);
},50)
},1000)
演示而已，具體的寬度和排列需要自己再組織下。或者消除，或者遮罩，對應不同的排列組合，其他的方式也比較好實現。
最后，大家都懂的，CSS3也可以實現一些幻燈片效果，
demo_7:
代碼如下:
/p>
"http://www.w3.org/TR/html4/loose.dtd">
*{
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;
}
- ?
- ?
- ?
- ?
為大家分享的js精美的幻燈片畫集特效代碼如下：
js精美的幻燈片畫集特效Up
Down
Previous
Next
總結
以上是生活随笔為你收集整理的html 幻灯片原理,js幻灯片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 职场中不要问程序员这五类问题
- 下一篇： 一篇故事讲述了计算机网络里的基本概念：网