层叠轮播图的简易制作

  之前做过很多不同样式的轮播图,不是通过改变left值使图片左右移动的,就是改变透明度实现轮播图的,偶然在网易云上看到了层叠轮播图,它转换图片的方式和其他轮播图有些不同,我从来没做过这种轮播图,思考了很久该用什么方法做,终于做出来了一个简陋的成品。由于轮播图的图片是网上找来的,所以我做了模糊处理,用清晰的图片效果更好,这里是我的一个演示(没有录制鼠标):

 思路和方法



我所能想出的最简单的方法就是先给轮播图中的几张图片特定的class值,再通过改变图片class的值来改变他们的位置

话不多说,上代码:

html

<div class="img">
    <div class="whole">
        <div class="roll-img">
            <span class="last"><</span>
            <ul id="ul">
                <li class="left"><img src="img/1.jpg" ><div></div></li>
                <li class="center"><img src="img/2.jpg" ><div></div></li>
                <li class="right"><img src="img/3.jpg" ><div></div></li>
                <li class="after1"><img src="img/4.jpg" ><div></div></li>
                <li class="after2"><img src="img/5.jpg" ><div></div></li>
                <li class="after3"><img src="img/6.jpg" ><div></div></li>
            </ul>
            <span class="next">></span>
        </div>
    </div>
    <div class="list">
        <span class="btn"></span>
        <span class="btn" style="background: red;"></span>
        <span class="btn"></span>
        <span class="btn"></span>
        <span class="btn"></span>
        <span class="btn"></span>
    </div>
</div>

css

*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .img{
            width: 100%;
            height: 300px;
            margin-top: 100px;
        }
        .whole{
            width: 50%;
            height: 100%;
            margin: 0 auto;
        }
        .roll-img{
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
        }
        .roll-img ul li{
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .left{
            left:-300px;
            transform: scale(0.8);
            z-index: 4;
            background: rgb(0,0,0);
            transition: all 0.5s ease;
        }
        .center{
            z-index: 6;
            left: 0;
            top: 0;
            bottom: 10%;
            transition: all 0.5s ease;
        }
        .right{
            left:300px;
            transform: scale(0.8);
            z-index: 4;
            background: rgb(0,0,0);
            transition: all 0.5s ease;
        }
        .left div,.right div{
            z-index: 5;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s ease;
        }
        .after1,.after2,.after3{
            z-index: 3;
            left: 0;
            top: 0;
            visibility: hidden;
            transform: scale(0);
        }
        .last,.next{
            position: absolute;
            z-index: 10;
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255,255,255,0.7);
            border-radius: 50px;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
            top:40%;
            color: rgba(255,255,255,0.6);
            display: none;
        }
        .list{
            width: 30%;
            height: 5px;
            display: flex;
            margin: 0 auto;
            margin-top: 20px;
        }
        .btn{
            transition: all 0.3s ease;
            flex: 1;
            background: rgb(244,244,244);
        }
        .btn:not(:first-child){
            margin-left: 20px;
        }
        .last{
            left:-230px;
        }
        .next{
            right: -230px;
        }

为了使效果更加流畅,好看,我加了许多相关代码

因为是层叠轮播,顾名思义就是每张图片都有属于它的一层空间,这样在轮播的时候才能体现出它的层次感,于是我设置了z-index属性,transition属性可以让动画变得非常自然,如果用js定时器来做会略显生硬,那么这样的效果就和网易云的效果比较类似了(有些效果仅靠我现在所学并不能做出来)

请注意,重点来了!

html和css都做好了,如何来做js使得图片产生轮播效果呢?

javascript

let classes = [‘left‘,‘center‘,‘right‘,‘after1‘,‘after2‘,‘after3‘];
let timer=setInterval(function(){
    before();
},5000);
function before(){
    for(let i=0;i<classes.length;i++){
        $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
    }
    let last = classes.pop();
    classes.unshift(last);
    for(let i=0;i<classes.length;i++){
        $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
        }
    }
}
function after(){
    for(let i=0;i<classes.length;i++){
        $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
    }
    let first = classes.shift();
    classes.push(first);
    for(let i=0;i<classes.length;i++){
        $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
        }
    }
}
for(let i=0;i<classes.length;i++){
    (function(i){
        $(‘#ul>li:eq(‘+i+‘)‘).click(function(){
            if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="left"){
                after();
            }else if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="right"){
                before();
            }else{
                return false;
            }
        });
        $(‘.btn:eq(‘+i+‘)‘).mouseover(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
            clearInterval(timer);
            while(classes[i]!=‘center‘){
                before();
            }
        });
        $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });
    })(i);
}

$(‘.last‘).click(function(){
    clearInterval(timer);
    before();
    timer=setInterval(function(){
        before();
    },5000);
});
$(‘.next‘).click(function(){
    clearInterval(timer);
    after();
    timer=setInterval(function(){
        before();
    },5000);
});
$(‘.img‘).mouseover(function(){
    $(‘.last,.next‘).css("display","block");
    clearInterval(timer);
});
$(‘.img‘).mouseout(function(){
    $(‘.last,.next‘).css("display","none");
    clearInterval(timer);
    timer=setInterval(function(){
        before();
    },5000);
});

以上是完整的js代码,下面我分开讲解

我设置了两个按钮,一个.last,另一个.next,当我按下它们图片就会左右滚动,实现它们很简单:

let classes = [‘left‘,‘center‘,‘right‘,‘after1‘,‘after2‘,‘after3‘];

先将轮播图中所有对象的类名都放在一个数组中,我放了六张图,所以有六个类名,现在试想一下,假如我点击next,那么第二张图就会跑到第一张图的位置上,同样第一张图会跑到最后一张图的位置上去,点击last刚好相反,最后一张图会跑到第一张图的位置上。

function before(){
    for(let i=0;i<classes.length;i++){
        $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
    }
    let last = classes.pop();
    classes.unshift(last);
    for(let i=0;i<classes.length;i++){
        $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
        }
    }
}
function after(){
    for(let i=0;i<classes.length;i++){
        $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
    }
    let first = classes.shift();
    classes.push(first);
    for(let i=0;i<classes.length;i++){
        $(‘#ul>li:eq(‘+i+‘)‘).attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")==‘center‘){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
        }
    }
}

用pop()取出数组最后一个元素,再用unshift()把它放到数组前面,shift()取出数组开头元素,再用push()把它放到数组后面,就搞定了(其他代码先不做解释)

下面要做的就是定时器了,不用操作也能使图片自行滚动起来:

let timer=setInterval(function(){
    before();
},5000);
$(‘.last‘).click(function(){
    clearInterval(timer);
    before();
    timer=setInterval(function(){
        before();
    },5000);
});
$(‘.next‘).click(function(){
    clearInterval(timer);
    after();
    timer=setInterval(function(){
        before();
    },5000);
});

首先设置一个定时器timer,每隔五秒执行一次,当鼠标点击按钮时,停止计时器,在开启,使得计时重新开始,这样就消除了定时器冲突

但这样还是远远不够的,不光点按钮可以实现左右滚动,点左右两边的图片都是可以滚动的

for(let i=0;i<classes.length;i++){
    (function(i){
        $(‘#ul>li:eq(‘+i+‘)‘).click(function(){
            if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="left"){
                after();
            }else if($(‘#ul>li:eq(‘+i+‘)‘).attr("class")=="right"){
                before();
            }else{
                return false;
            }
        });
        $(‘.btn:eq(‘+i+‘)‘).mouseover(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
            clearInterval(timer);
            while(classes[i]!=‘center‘){
                before();
            }
        });
        $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });
    })(i);
}

通过判断点击图片的class值来决定向左滚动还是向右滚动,点击正中间的图片无效

接下来当鼠标移入移出的时候,两个按钮.last和.next会再显示和不显示两个属性之间切换,当鼠标移入时,定时器停止,移出时又重新开始

$(‘.img‘).mouseover(function(){
    $(‘.last,.next‘).css("display","block");
    clearInterval(timer);
});
$(‘.img‘).mouseout(function(){
    $(‘.last,.next‘).css("display","none");
    clearInterval(timer);
    timer=setInterval(function(){
        before();
    },5000);
});

轮播图的下面有六个方块,哪个图片在正中间,哪个方块就是红色的,这个在上面几个js代码中已经写出来了

然后我们要使得鼠标放到哪个方块上,轮播图就跳到对应的图片,停止计时器,同时其他图片在数组中的位置也不会改变,鼠标移出方块之后启动计时器

 $(‘.btn:eq(‘+i+‘)‘).mouseover(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","red");
            clearInterval(timer);
            while(classes[i]!=‘center‘){
                before();
            }
        });
        $(‘.btn:eq(‘+i+‘)‘).mouseout(function(){
            $(‘.btn:eq(‘+i+‘)‘).css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });

这里我用了while循环,如果我们放到的方块对应的图片不在中心,就开始循环调用before函数,直到图片的类名等于‘center‘,也就是正中心的位置

这样我们就完成了层叠轮播图的所有基本功能,除了样式长得不太像网易云的之外,网易云轮播图该有的我们都有了。

原文地址:https://www.cnblogs.com/Tohold/p/9429890.html

时间: 2024-10-05 07:59:45

层叠轮播图的简易制作的相关文章

猫猫学iOS 之广告轮播图,collectionView制作

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 效果图 不多说,好不好先看效果,之前做过一个scrollView的轮播图,但是很局限,很多多余代码,今天猫猫重新做了一个用collectionView的流水布局做的一个,可以拿去做广告轮播,也可以做系统新特性哦,来,看下效果吧. 源码共享:https://github.com/znycat/NYCarouselView 很久很久以前就想做了.总而言之,猫猫代码有

猫猫学iOS 之广告轮播图,collectionView制作(源码)

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 源码共享:https://github.com/znycat/NYCarouselView 效果图 源代码 NYCarouselView.h // // NYCarouselView.h // 广告轮播CollectionView // // Created by IOS on 15/12/26. // Copyright ? 2015年 com.itcat.c

20150621层叠轮播图

html================ <input type="button" id='left' value='左'> <input type="button" id='right' value='右'> <div id="box1"></div> <div id="box2"></div> <div id="box3"&g

CSS-用伪类制作小箭头(轮播图的左右切换btn)

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

基于css制作轮播图的部分效果

在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将向大家介绍一种最近实验出来的一种方法. 在介绍这种方法之前,本人觉得对于css中的某些伪类选择器有必要进行进一步的分析. hover这个伪类选择器表示的是当鼠标移动到元素上时元素的反应.这一特性与js中的mousemove事件十分的相近,那么其是不是可以被近视地看做该事件呢?下面我们来做一个例子:

淘宝店铺首页全屏轮播图制作

淘宝店铺首页全屏轮播图制作 | 浏览:1081 | 更新:2014-09-27 12:03 | 标签: 淘宝 很多朋友都想要做全屏轮播图,接下来我来说说我的经验 工具/原料 美图秀秀 方法/步骤 1.首先要制作或者搜寻图片宽度1920高度610的高画质图片 2.上传到淘宝图片空间,并复制其连接 3.将复制的连接替换到如下图以“jpg”结尾的那个地方.(有3个地方,可用3张图替换) 4.复制代码,进入淘宝店铺装修页面,新建“自定义内容区” 5.将自定义内容区置于顶部,编辑,输入代码界面,黏贴代码,

jQuery实现简易轮播图的效果

(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue angular中,加油~~~) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &

原生JS实现简易轮播图

原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = function() { var tab = 0; var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5