原生JS实现图片轮播与淡入效果的简单实例
2016-08-21 13:44
1256 查看
最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′
从原理来讲，网上的教程有很多，简单来说。
淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，其他为none，所以实际存在并且在文档流占位置的只有一张图片。在设置图片的display方式之前，将图片的透明度逐渐增大，就会给人一种淡入的感觉。
其实在js代码中，还有关键的一点，代码中用到了闭包，因此，才对闭包有了一点点认识。在这里多说几句吧：
闭包的官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
比较简单的说法是：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。
尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。
下面这个函数就是一个闭包函数。为什么要用闭包？普通函数不可以吗？真的是不可以。这里闭包的作用是保持对flag的引用。如果不用闭包，对于局部变量来说，只要函数执行了一次，也就是flag执行了一次，这个局部变量就会被垃圾回收机制回收清理掉，而我们通过间歇调用中的函数引用flag变量，在第二次执行的时候，flag就会失去它的值，函数体无法执行正确的结果了。在开始接触前端的时候，觉得闭包可有可无，事实是，这东西真的很重要！
var setVal = function(s, flag)
{
return function()
{
pos = Math.abs(parseInt(pic.style[point]));
if(flag > 0){ //当前点大于目标点坐标，画面向右移动，left值减小
pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
}
if(flag < 0) {
pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
}
if(pos == (sSingleSize * s))
{
now = s;
clearInterval(interval);
}
}
};
下面是代码：
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>picsGlide</title> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script src="js/index.js"></script> </head> <body onLoad="init()"> <div id = "picBox"> <ul class = "show_pic" style = "left: 0"> <li class = "on"><a href="#"><img src="imgs/ccc.jpg" alt="" title="" /></a></li> <li><img src="imgs/aaa.jpg" alt="" title="" /></li> <li><img src="imgs/bbb.jpg" alt="" title="" /></li> <li><img src="imgs/ccc.jpg" alt="" title="" /></li> <li><img src="imgs/ccc.jpg" alt="" title="" /></li> </ul> <div class = "bg"></div> <ul class = "show_des"> <li class="on">puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class = "icon_num"> <li class = "on" >1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
css
body {font-size: 12px;
}
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
#picBox {
width: 610px;
height: 205px;
margin: 50px auto;
overflow: hidden;
position: relative;
font-size: 0;
}
/*轮播图片*/
#picBox .show_pic {
width: 3050px;
position: absolute;
}
#picBox .show_pic li {
float: left;
width: 610px;
height: 205px;
display: none;
/*display: none;
*/
}
#picBox .show_pic li.on {
display: block;
}
#picBox .show_pic li img {
display: block;
width: 610px;
height: 205px;
}
#picBox .icon_num {
position: absolute;
bottom: 12px;
right: 10px;
z-index: 10;
}
#picBox .icon_num li {
float: left;
/*background: url(/uploadfile/200912/28/FA15567738.gif) no-repeat -15px 0;
*/
width: 16px;
height: 16px;
font-size: 16px;
color: #39F;
text-align: center;
cursor: pointer;
margin-right: 5px;
}
#picBox .icon_num li.on {
background: #000;
opacity: 0.5;
}
/*背景*/
.bg {
z-index: 1;
position: absolute;
bottom: 0;
height: 40px;
width: 610px;
background: #000;
opacity: 0.6;
filter: alpha(opacity = 60);
}
#picBox .show_des {
width: 300px;
height: 18px;
position: absolute;
bottom: 11px;
left: 15px;
color: #fff;
z-index: 10;
}
#picBox .show_des li {
display: none;
line-height: 18px;
font-size: 18px;
}
#picBox .show_des li.on {
display: block;
}
js
function cleanWhitespace(oEelement)
{
for(var i=0;i<oEelement.childNodes.length;i++){
var node=oEelement.childNodes[i];
if(node.nodeType==3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
//轮播代码
this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point)
{
var interval,timeout; //两个定时器
var pos; //当前定位坐标整形的绝对值
var time = second, now = 0; //time图片移动一次时间间隔， now当前图片的index值
var speed = fSpeed //移动速度
var delay = second * 1000; //每次切换图片的时间间隔
var picBox = document.getElementById(oBox);
cleanWhitespace(picBox);
var pic = picBox.childNodes[0]; //图片列表
var des = picBox.childNodes[2].getElementsByTagName("li"); //图片列表
var con = picBox.childNodes[3].getElementsByTagName("li");
var sum = con.length;var setVal = function(s, flag)
{
return function()
{
pos = Math.abs(parseInt(pic.style[point]));
if(flag > 0){ //当前点大于目标点坐标，画面向右移动，left值减小
pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
}
if(flag < 0) {
pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
}
if(pos == (sSingleSize * s))
{
now = s;
clearInterval(interval);
}
}
};
var changeTo = function(num) {
for(var i=0; i<sum; i++)
{
con[i].className = "";
des[i].className = "";
};
con[num].className = "on";
des[num].className = "on";
var flag = Math.abs(parseInt(pic.style[point]))-sSingleSize * num ;
interval = setInterval(setVal(num, flag), time);
//bkg.hide().fadeIn();
}
function autoGlide()
{
clearTimeout(interval);
now = (now == (parseInt(sum)-1) )? 0: (now + 1);
changeTo(now);
timeout = setTimeout(autoGlide,delay);
}
function isAuto() {
if(auto) {
timeout = setTimeout(autoGlide,delay);
};
}
isAuto(); //开始自动轮播
for(var i=0; i<sum; i++) //导航按钮
{
con[i].onmouseover = (function(i)
{
return function()
{
clearTimeout(timeout);
clearInterval(interval);
changeTo(i);
this.onmouseout=isAuto();
}
})(i)
}
}
//淡入淡出
this.layerFader=function(auto, oBox, second, count, speed)
{
var interval,timeout; //两个定时器
var now = 0; //time图片移动一次时间间隔， now当前图片的index值
var delay = second * 1000; //每次切换图片的时间间隔
var picBox = document.getElementById(oBox);
cleanWhitespace(picBox);
var pic = picBox.childNodes[0].getElementsByTagName("li");
var des = picBox.childNodes[2].getElementsByTagName("li");
var con = picBox.childNodes[3].getElementsByTagName("li");
var sum = con.length;
function fadeIn(elem){
setOpacity(elem,0); //初始全透明
for(var i = 0;i<=count;i++){ //透明度改变 20 * 5 = 100
(function(i){
var level = i * 5; //透明度每次变化值
setTimeout(function(){
setOpacity(elem, level)
},i*speed);
})(i);
}
}
function setOpacity(elem, level) { //设置透明度
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
} else {
elem.style.opacity = level / 100;
}
}
var changeTo = function(num) {
for(var i=0; i<sum; i++)
{
con[i].className = "";
des[i].className = "";
pic[i].className = "";
};
fadeIn(pic[num]);
con[num].className = "on";
des[num].className = "on";
pic[num].className = "on";
//bkg.hide().fadeIn();
}
function autoGlide()
{
clearTimeout(interval);
now = (now == (parseInt(sum)-1) )? 0: (now + 1);
changeTo(now);
timeout = setTimeout(autoGlide,delay);
}
function isAuto() {
if(auto) {
timeout = setTimeout(autoGlide,delay);
};
}
isAuto(); //开始自动轮播
for(var i=0; i<sum; i++) //导航按钮
{
con[i].onmouseover = (function(i)
{
return function()
{
clearTimeout(timeout);
//clearInterval(interval);
changeTo(i);
this.onmouseout=isAuto();
}
})(i)
}
}
jquery相对于js就简单了很多，这里就不赘述了。大三的时候上设计模式课，老师告诉我们针对接口而不是针对实现编程，代码中尽量不要出现常量，提高代码的复用性，所以写代码的时候，把可变的因素都提到了参数中。最后一句，对于js的DOM操作，js原生是王道，多用多练，才能掌握的好，希望以后越走越远。
以上这篇原生JS实现图片轮播与淡入效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript实战(原生range和自定义特效)简单实例
- 原生JS实现-星级评分系统的简单实例
- js获取当前日期前七天的 解决方案
- JS中对象的类型
- json过滤某些属性 之@jsonignore
- JSONP和批量操作功能的实现方法
- 简单封装分页功能pageView.js
- RegExp正则表达式
- KnockoutJs (三)为Json数据添加监控属性（方法）
- JS数组去重
- 如何写出高性能的JSP和Servlet
- JavaScript中instanceof运算符的用法以及和typeof的区别
- jsp中的九大内置对象
- [leetcode]121. Best Time to Buy and Sell Stock -- JavaScript 代码
- 3、Ext组件Panel面板使用
- 父类和子类都存在click事件，如何让子类事件高于父类事件
- 深入理解正则表达式语法知识
- JavaScript第一篇之实现按钮全选、功能
- JavaScript根据数组构建链表
- JWT【JSON Web Token】 简述