JavaScript

js 水平轮播和透明度轮播的实现

Nick · 1月27日 · 2020年本文7606字 · 阅读20分钟827

@TOC

透明度轮播

主要思路:透明度轮播相对水平轮播的实现更简单一点。首先在HTML里建一个绝对定位的div盒子,然后在这个div盒子里用列表的方式插入四张图片,设置为绝对定位,并且块排列;接着在js中实现动态效果,透明轮播的实现就是将前一张图片的透明度设置为0,需要轮播的那一张图片的透明度设置为1,在js的对象中实现,最后实现手动点击轮播,子弹轮播,自动轮播。

本次轮播实现借用了上次animate的函数封装 animate.js

animate封装代码如下

//返回el对象css样式中的property属性值
function getStyle(el, property) {
    if (getComputedStyle) {
        return getComputedStyle(el)[property];
    } else {
        return el.currentStyle[property];
    }
}
/* 对el对象css样式中的属性值进行更改,更改的内容在properties里面,properties是一个
属性对象数组,对每一个properties里的每一个对象值进行修改,并且产生由快到慢的动画
效果变化 */
function animate(el, properties) {
    clearInterval(el.timeId);
    //产生动态效果的方法
    el.timeId = setInterval(function() {
        for (var property in properties) {
            var current;
            var target = properties[property];
            //分为两种参数,一种是透明度,范围是0到1的变化
            if (property == "opacity") {
                current = Math.round(getStyle(el, "opacity") * 100);
            }
            //另一种是像素的变化,如width , height 等
            else {
                current = parseInt(getStyle(el, property));
            }
            //属性的变化速度(由快到慢)
            var speed = (target - current) / 30;
            //ceil向上取整  floor向下取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //重新设置el对象 css中的样式
            if (property == "opacity") {
                el.style.opacity = (current + speed) / 100;
            } else {
                el.style[property] = current + speed + "px";
            }
        }
    }, 20);

}

透明度轮播实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin :0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .slider{
                width: 400px;
                height: 500px;
                border: 5px solid #00FFFF;
                position: relative;
                top: 20px;
                margin: 0px auto;
            }
            .slider .list .item{
                position: absolute;
                left: 0px;
                top:  0px;
                opacity: 0;
            }
            .slider .list .item:first-child{
                opacity: 1;
            }
            .slider .list .item img{
                width: 400px;
                height: 500px;
                display: block;
            }
            .slider .prev, .slider .next{
                position: absolute;
                top: 220px;
            }
            .slider .next{
                right: 0;
            }
            .slider .pagination{
                position: absolute;
                top: 450px;
                left: 150px;
            }
            .slider .pagination .bullet{
                width: 20px;
                height: 20px;
                background-color: lightgreen;
                margin-left: 5px;
                float: left;
                border: 2px solid yellow;
                cursor: pointer;/*鼠标移动到上面时,变成手  */
                color: white;
                line-height: 20px;
                text-align: center;
            }
            .slider .pagination .bullet.focus{
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <!-- 图片列表 -->
            <ul class="list">
                <li class="item"><img src="./image/a.jpg" alt=""></li>
                <li class="item"><img src="./image/b.jpg" alt=""></li>
                <li class="item"><img src="./image/c.jpg" alt=""></li>
                <li class="item"><img src="./image/d.jpg" alt=""></li>
            </ul>
            <button type="button" class="prev">prev</button>
            <button type="button" class="next">next</button>
            <!-- 子弹列表 -->
            <ul class="pagination">
                <li class="bullet focus">1</li>
                <li class="bullet">2</li>
                <li class="bullet">3</li>
                <li class="bullet">4</li>
            </ul>
        </div>      
        <script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var nextIndex,prevIndex;
            var len;
            var id;
            init();
            // 构造函数
            function init(){
                prevIndex = nextIndex=0;
                // 获取图片对象的数组
                len = document.querySelectorAll(".list .item").length;
                //点击prev向前轮播
                document.querySelector(".prev").onclick=function(){
                    sliderPrev();
                }
                //点击next向后轮播
                document.querySelector(".next").onclick=function(){
                    sliderNext();
                }
                //获取子弹,对每一个子弹进行检测
                var bullets = document.querySelectorAll(".slider .pagination .bullet");
                for(var i=0;i<bullets.length;i++){
                    bullets[i].index=i;
                    bullets[i].onclick = function(){
                        prevIndex = nextIndex;
                        nextIndex = this.index;
                        sliderTo(prevIndex,nextIndex);
                    }
                }
                //自动轮播
                var silder = document.querySelector(".slider");
                //鼠标移动到图片上是停止轮播
                silder.onmouseover = function(){
                    stop();
                }
                //鼠标离开图片时又开始轮播
                silder.onmouseout = function(){
                    auto();
                }
                auto();
            }
            //向前轮播的方法
            function sliderPrev(){
                prevIndex = nextIndex;
                nextIndex--;
                if(nextIndex==-1){
                    nextIndex=len-1;
                }
                sliderTo(prevIndex,nextIndex);

            }
            //向后轮播的方法
            function sliderNext(){
                prevIndex = nextIndex;
                nextIndex++;
                if(nextIndex==len){
                    nextIndex=0;
                }
                sliderTo(prevIndex,nextIndex);
            }
            //轮播的实现方法
            function sliderTo(prev,next){
                var lis = document.querySelectorAll(".list .item");
                //实现子弹轮播(交换焦点className)
                var buttons = document.querySelectorAll(".slider .pagination .bullet");
                buttons[prev].className = "bullet";
                buttons[next].className = "bullet focus";
                //调用animate方法实现透明度的转换
                animate(lis[prev],{opacity:0});
                animate(lis[next],{opacity:100});

            }
            //自动轮播
            function auto(){
                clearInterval(id);
                id = setInterval(function(){
                    sliderNext();
                },2000)
            }
            //停止轮播
            function stop(){
                clearInterval(id);
            }
        </script>
    </body>
</html>

实现效果

在这里插入图片描述

水平轮播

主要思路:水平轮播相对复杂一点,需要计算好图片的排列长度,需要用到一点点小技巧,
怎么来实现最后一张图片轮播后会直接返回到第一张图片?
  将第一张图片获取,放在最后一张的后面,将最后一张图片获取放在第一张图片前面,生成了新的图片列表,当运动到最后一张图片(实际上是第一张)时,下一张要出现的图片直接是第二张图片;当运动到第一张图片(实际上是最后一张)时,前一张要出现的图片直接是倒数第三张。
其他的实现方法基本和透明度轮播类似,但是轮播是改变的是距离left
轮播也应用了封装的animate

水平轮播实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            .slider {
                width: 400px;
                height: 500px;
                border: 5px solid #00FFFF;
                position: relative;
                top: 20px;
                margin: 0px auto;
                overflow: hidden;

            }

            .slider .list {
                position: absolute;
            }

            .slider .list .item {
                width: 400px;
                height: 600px;
                float: left;

            }

            .slider .list .item img {
                width: 400px;
                height: 600px;
                display: block;
            }

            .slider .prev {
                position: absolute;
                top: 220px;
                left: 0;
            }

            .slider .next {
                position: absolute;
                top: 220px;
                right: 0;
            }

            .slider .pagination {
                position: absolute;
                top: 450px;
                right: 50px;
            }

            .slider .pagination .bullet {
                width: 20px;
                height: 20px;
                background-color: lightgreen;
                margin-left: 5px;
                float: left;
                z-index: 999;
                border: 2px solid yellow;
                cursor: pointer;
                /*鼠标移动到上面时,变成手  */
                color: white;
                line-height: 20px;
                text-align: center;
            }

            .focus {
                background-color: hotpink !important;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <ul class="list">
                <li class="item"><img src="./image/a1.jpg" /></li>
                <li class="item"><img src="./image/a2.jpg" /></li>
                <li class="item"><img src="./image/a3.jpg" /></li>
                <li class="item"><img src="./image/a4.jpg" /></li>
                <li class="item"><img src="./image/a5.jpg" /></li>
            </ul>

            <button type="button" class="prev">prev</button>
            <button type="button" class="next">next</button>


            <ul class="pagination">
                <li class="bullet focus">1</li>
                <li class="bullet">2</li>
                <li class="bullet">3</li>
                <li class="bullet">4</li>
                <li class="bullet">5</li>
            </ul>
        </div>

        <script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            (function() {
                var currentIndex;
                var lis;
                var len;
                var id;
                var liwidth;

                init();
                //构造函数
                function init() {
                    //将第一张图片获取,放在最后一张的后面,将最后一张图片获取放在第一张图片前面
                    currentIndex = 1;
                    var li_1 = document.querySelector(".slider .list .item:first-of-type");
                    var copy_1 = li_1.cloneNode(true);
                    var li_last = document.querySelector(".slider .list .item:last-of-type");
                    var copy_last = li_last.cloneNode(true);
                    var list = document.querySelector(".slider .list");
                    list.appendChild(copy_1);
                    list.insertBefore(copy_last, li_1);
                    lis = document.querySelectorAll(".list .item");
                    liwidth = lis[0].offsetWidth;
                    len = lis.length;
                    list.style.width = liwidth * len + "px";
                    list.style.left = -liwidth + "px";
                    //点击prev向前轮播
                    document.querySelector(".prev").onclick = function() {
                        sliderPrev();
                    }
                    //点击next向后轮播
                    document.querySelector(".next").onclick = function() {
                        sliderNext();
                    }
                    //子弹轮播
                    var bullets = document.querySelectorAll(".slider .pagination .bullet");
                    for (var i = 0; i < bullets.length; i++) {
                        bullets[i].index = i;
                        bullets[i].onclick = function() {
                            currentIndex = this.index + 1;
                            sliderTo(currentIndex);
                        }
                    }               
                    //自动轮播实现
                    var silder = document.querySelector(".slider");
                        silder.onmouseover = function(){
                            stop();
                        }
                        silder.onmouseout = function(){
                            auto();
                        }
                        auto();
                    }

                //向前轮播的方法
                function sliderPrev() {
                    currentIndex--;
                    sliderTo(currentIndex);
                }
                //向后轮播的方法
                function sliderNext() {
                    currentIndex++;
                    sliderTo(currentIndex);
                }
                //轮播的实现方法
                function sliderTo(index) {
                    var list = document.querySelector(".slider .list");
                    //图片移动的关键代码
                    if (index == len) {
                        currentIndex = index = 2;
                        list.style.left = -liwidth + "px";
                    }
                    if (index == -1) {
                        currentIndex = index = len - 3;
                        list.style.left = -(len - 2) * liwidth + "px";
                    }

                    //子弹焦点
                    var focusIndex;
                    var bullets = document.querySelectorAll(".pagination .bullet");
                    if (index == 0) {
                        focusIndex = bullets.length - 1;
                    } else if (index == len - 1) {
                        focusIndex = 0;
                    } else {
                        focusIndex = index - 1;
                    }
                    document.querySelector(".focus").className = "bullet";
                    bullets[focusIndex].className = "bullet focus";

                    //获取要移动到的目标位置
                    var left = -index * liwidth;
                    animate(list, {
                        left: left
                    });
                }
                //自动轮播
                function auto() {
                    clearInterval(id);
                    id = setInterval(function(){
                        sliderNext()
                    },2000);
                }
                //停止轮播
                function stop() {
                    clearInterval(id);
                }
            })()
        </script>
    </body>
</html>

实现效果

在这里插入图片描述

本次轮播实现的素材图片

js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
js 水平轮播和透明度轮播的实现-左眼会陪右眼哭の博客
在这里插入图片描述

0 条回应
在线人数:1人 来访统计
隐藏