原生JS实现图片轮播与淡入

最新推荐文章于 2022-05-19 12:17:45 发布

zerlinda_c

最新推荐文章于 2022-05-19 12:17:45 发布

阅读量5.4k

点赞数 1

分类专栏： jquery 文章标签： jquery 前端 javascript 轮播淡入淡出

本文链接：https://blog.csdn.net/zerlinda_c/article/details/50299481

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

　　最近对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;
}

    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原生是王道，多用多练，才能掌握的好，希望以后越走越远。

zerlinda_c

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现图片轮播与淡入

最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′ 　　　　从原理来讲，网上的教程有很多，简单来说。　　　　淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，
复制链接

扫一扫

专栏目录