透明轮播原生JavaScript实现

标签: JavaScript 轮播图 原生JS 透明轮播
19人阅读 评论(0) 收藏 举报
分类:

html代码

<div id="box">
    <ul id="ul">
        <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <ol id="ol">
        <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ol>
</div>

css代码

 * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 500px;
            width: 800px;
            border: 1px solid #c0c0c0;
            position: absolute;
            margin: 100px auto;
            left: 100px;
        }

        ul {
            list-style: none;
            height: 100%;
            width: 100%;
        }

        ul > li {
            height: 100%;
            width: 100%;
            position: absolute;
            font-size: 30px;
            text-align: center;
        }

        ol {
            list-style: none;
            width: 100%;
            margin-top: 5px;
        }

        ol > li {
            height: 100px;
            width: 146px;
            margin-left: 8px;
            float: left;
            text-align: center;
            border: 1px solid #999999;
        }

        ol > li img {
            height: 100px;
            width: 146px;
            float: left;
        }

JS代码 

动画封装

 function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }
        //一会回头再看看 null应该如何使用?
        return window.getComputedStyle(ele, null)[attr]
    }

    function animate(obj, json, callback) {
        //1.情况定时器
        clearInterval(obj.timer);
        //2.创建定时器
        obj.timer = setInterval(function () {
            // 新的位置=当前的位置+步长
            var flag = true;// 默认认为所有的 值 都完成了动画
            for (var key in json) {
                var target = 0;//目标位置
                var current = 0;//当前位置
                if (key.toLowerCase() == "opacity") {
                    target = Math.round(json[key] * 100);
                    current = Math.round(getStyle(obj, key) * 100)
                } else if (key != "zIndex") {
                    // height,width,left top
                    target = parseInt(json[key]);
                    current = parseInt(getStyle(obj, key));
                }
                //步长

                if (key != "zIndex") {
                    //说明 不参与  zIndex 变化
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                }

                // 新的位置=当前的位置+步长
                if (key.toLowerCase() == "opacity") {
                    obj.style.opacity = (current + step) / 100;
                } else if (key != "zIndex") {
                    obj.style[key] = current + step + "px";// height,width,left top
                }

                if (key == "zIndex") {
                    // 如果key== zIndex 直接给 对象赋值
                    obj.style.zIndex = Number(json[key]);
                }

                //关注哪些属性的动画还没完成
                if (current != target) {
                    flag = false;
                }
            }

            //如果for里面都没有任何属性需要改变 flag的状态,说明动画都完成了
            if (flag) {
                clearInterval(obj.timer);
                //动画完成后,通知或者做其他操作
                //此处说明 callback就是一个函数
                if (typeof(callback) == "function") {
                    callback(obj);//执行callback函数
                }
            }
        }, 30)
    }

 var ul = document.getElementById('ul');
    var ol = document.getElementById('ol');
    var lis = ul.children;
    var olls = ol.children;
    var timer = setInterval(autoPlay, 1500);
    var index = 0;

    function autoPlay() {
        index++; //
        if (index >= 5) {
            index = 0
        }

        for (var i = 0; i < lis.length; i++) {
            if (i == index) {
                animate(lis[index], {"opacity": 1});
                animate(olls[index], {"opacity": 1})
            } else {
                animate(lis[i], {"opacity": 0});
                animate(olls[i], {"opacity": 0.1})
            }
        }

        for (var i = 0; i < olls.length; i++) {
            olls[i].index = i;
            olls[i].onmouseenter = function () {
                index = this.index;
                index--;
                clearInterval(timer);
                autoPlay();
            };
            olls[i].onmouseleave = function () {
                index = this.index;
                index;
                timer = setInterval(autoPlay, 1500);
            }
        }

        ul.onmouseenter = function () {
            clearInterval(timer);
        };

        ul.onmouseleave = function () {
            timer = setInterval(autoPlay, 1500);
        }
    }
查看评论

【Python】第六周 Python Web项目开发实现(下)

-
  • 1970年01月01日 08:00

html+css+js原生轮播

  • 2017年09月22日 21:59
  • 247KB
  • 下载

JS原生轮播(JS篇)

接着上一篇,我接下来写关于JS的部分,我会按照我当时的思路一步一步的写,在最后附上全部的代码 一开始我打算写最简单的图片切换功能,怎么写呢?当我们点击左右箭头的时候是用改变left的值,有了思路就很...
  • qq_26626113
  • qq_26626113
  • 2015-07-28 11:31:49
  • 6062

原生JS-实现无限图片轮播

实现思路:      一、布局部分:                1、采用div>ul>li>img布局,来展示轮播的图片banner;                2、采用div>>ul>...
  • q908555281
  • q908555281
  • 2017-04-21 14:01:46
  • 6322

用原生JS写无缝轮播

琢磨了几个小时终于写出来了,上代码 这是布局结构 > 这是样式 body,ul,ol{ margin: 0; padding: 0; } l...
  • zzzWhite
  • zzzWhite
  • 2017-02-23 23:01:19
  • 2811

原生javascript 轮播图插件

/** * YSlide轮播图插件 * @param {type} config * config.box : 轮播图容器ID (轮播图容器的父ID) * config.n...
  • w826950544
  • w826950544
  • 2014-08-26 17:53:46
  • 1452

原生javascript实现的3D轮播动画

  • 2017年05月04日 16:17
  • 1.58MB
  • 下载

原生javascript实现图片自动轮播和点击轮播代码

Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{hei...
  • sinat_21206105
  • sinat_21206105
  • 2016-08-23 09:56:13
  • 13540

原生js图片轮播效果

  • 2017年08月22日 09:26
  • 336KB
  • 下载

原生js实现——轮播图效果

实现点击左右箭头时滚动一张图片,当图片滚动到末尾时,响应的箭头变为不可点击状态,并实现图片随着鼠标滚动进行响应的滚动。 图片轮播展示 *{ ...
  • deeerforest
  • deeerforest
  • 2016-07-25 12:21:06
  • 1746
    个人资料
    等级:
    访问量: 0
    积分: 181
    排名: 0
    文章分类
    文章存档