js实战
js实战
阅读(10.1k) 书签 赞(0) 我要纠错

js幻灯片

2018-08-10 16:12 更新


常见的幻灯片切换无非就是轮播和渐变，不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的。摒弃其他的效果，最简单的轮播也就只有一条语句： 


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> 
<div id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</div> 
<script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
setInterval(function(){ 
img_list.appendChild(img_list.firstChild); 
},500) 
</script> 
</body> 
</html> 
w3c
（上面的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> 
<div id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</div> 
<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> 
<div id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</div> 
<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> 
<div id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</div> 
<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> 
<div id="view"> 
<ul id="img_list"> 
<li id="a"></li> 
<li id="b"></li> 
<li id="c"></li> 
</ul> 
</div> 
<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="" /> 
<div id="wrap" style="position: relative; "></div> 
<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 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) 
</script> 
</body> 
</html> 

实例

js幻灯片

幻灯片

演示而已，具体的宽度和排列需要自己再组织下。或者消除，或者遮罩，对应不同的排列组合，其他的方式也比较好实现。 
最后，大家都懂的，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> 
<div 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> 
</div> 
</body> 
</html> 
js


为大家分享的js精美的幻灯片画集特效代码如下：

<!doctype html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js精美的幻灯片画集特效</title>
 <link rel="shortcut icon" href="../favicon.ico">
 <meta name="description" content="Portfolio Image Navigation with jQuery" />
 <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
 <meta name="author" content="Marcin Dziewulski for Codrops" />
 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/portfolio.js" type="text/javascript"></script>
 <script src="js/init.js" type="text/javascript"></script>
 </head>
 <body>
  
 <div id="portfolio">
 <div id="background"></div> 
 <div class="arrows">
 <a href="#" class="up">Up</a>
 <a href="#" class="down">Down</a>
 <a href="#" class="prev">Previous</a>
 <a href="#" class="next">Next</a>
 </div>
 <div class="gallery">
 <div class="inside">
 <div class="item">
 <div><img src="images/1.jpg" alt="image1" /></div>
 <div><img src="images/2.jpg" alt="image2" /></div>
 <div><img src="images/3.jpg" alt="image3" /></div>
 </div>
 <div class="item">
 <div><img src="images/4.jpg" alt="image4" /></div>
 <div><img src="images/5.jpg" alt="image5" /></div>
 </div>
 <div class="item">
 <div><img src="images/6.jpg" alt="image6" /></div>
 <div><img src="images/7.jpg" alt="image7" /></div>
 <div><img src="images/8.jpg" alt="image8" /></div>
 <div><img src="images/9.jpg" alt="image9" /></div>
 <div><img src="images/10.jpg" alt="image10"/></div>
 <div><img src="images/11.jpg" alt="image11"/></div>
 </div>
 <div class="item">
 <div><img src="images/12.jpg" alt="image12"/></div>
 <div><img src="images/13.jpg" alt="image13"/></div>
 <div><img src="images/14.jpg" alt="image14"/></div>
 <div><img src="images/15.jpg" alt="image15"/></div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>

以上内容是否对您有帮助：
← js选项卡
js下拉菜单制作 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号