Js或jQuery图片层叠轮播------Sestid

最新推荐文章于 2024-05-06 16:10:32 发布
最新推荐文章于 2024-05-06 16:10:32 发布
阅读量2.4k 收藏 17
点赞数 3
分类专栏： Js和jQuery实现的特效❤️ 文章标签： Js或jQuery图片层叠轮播------Sestid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sestid/article/details/100540076
版权

目录

原生Js3张图片层叠轮播：

html：

CSS:

JavaScript：

jQuery6张图片层叠轮播：

html：

css：

javaScript：

详细解析：

原生Js3张图片层叠轮播：

 

html：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>wtf</title>
</head>
<body>
 <div class="container">
     <div class="box">
         <img class="front" src="img/A.jpg" alt="PIC">
         <img class="back" src="img/B.jpg" alt="PIC">
         <img class="active" src="img/C.jpg" alt="PIC">
         <div class="btns">
             <span class="btn"><</span>
             <span class="btn">></span>
         </div>
     </div>
 </div>
 
</body>
</html>

CSS:

<style>
    .box {
        width: 1200px; 
        height: 300px; 
        transform-style: 
        perserve-3d;
        margin: 50px auto;                 
        position: relative;
    }
    .box img {
        width:600px; 
        position: absolute; 
        top: 60px; 
        transition:all .3s linear;
    }
    .box:hover .btn {
        opacity: 1;
    }
    .front {
        left: 0px;
    }
    .back {
        left: 600px;
    } 
    .active {
        left: 300px; 
        transform: scale(1.5); 
        z-index: 10;
    }
    .btns .btn {
        width: 60px; 
        height: 60px; 
        display: block; 
        position: absolute; 
        background-color: rgba(0,0,0,.5);    
        font-size: 50px; 
        font-family: "微软雅黑"; 
        color:rgba(255,255,255,.5); 
        line-height: 55px; 
        text-align: center;     
        cursor: pointer; 
        z-index: 100; 
        opacity: 0; 
        transition:opacity .3s linear;
    } 
    .btns .btn:first-child {top: 125px;}
    .btns .btn:last-child {top: 125px; right: 0px;}
</style>

JavaScript：

<script>
onload = function(){
var btns = document.getElementsByClassName('btn'),
 imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
 
var index = 2,
 front = 0,
 back = 0,
 offset = false,
 timer = setInterval(timer,5000);
  
 
 
for(var i=0;i<btns.length;i++){
(function(i){
 btns[i].onclick = function(){click(i)};
})(i);
 
btns[i].onmouseover = function(){
 offset = true;
}
btns[i].onmouseout = function(){
 offset = false;
}
}
 
for(var i=0;i<imgs.length;i++){
imgs[i].onmouseover = function(){
 offset = true;
}
imgs[i].onmouseout = function(){
 offset = false;
}
}
 
function timer(){
console.log(offset)
if(offset){
 return;
}
else{
 click(1)
}
}
 
function click(x){
imgs[index].setAttribute('class','');
if(x === 0){
 if(--index < 0){
 index = --imgs.length;
 }
 front = back = index;
 if(++front > --imgs.length){front = 0}
 if(--back < 0){back = --imgs.length}
 imgs[front].style.zIndex = '1';
 imgs[back].style.zIndex = '0';
}
else{ 
 if(++index > --imgs.length){
 index = 0; 
 }
 front = back = index;
 if(++front > --imgs.length){front = 0}
 if(--back < 0){back = --imgs.length}
 imgs[front].style.zIndex = '0';
 imgs[back].style.zIndex = '1';
}
imgs[index].style.zIndex = '10';
imgs[front].setAttribute('class','front')
imgs[back].setAttribute('class','back') 
imgs[index].setAttribute('class','active');
}
}
</script>

这个原生js的就不详细解释了，下边用jQuery的有详细解释，其实不用解释正常有点实力的前端开发人员都能看懂

 

jQuery6张图片层叠轮播：

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" alt=""><div></div></li>
                <li class="center"><img src="img/2.jpg" alt=""><div></div></li>
                <li class="right"><img src="img/3.jpg" alt=""><div></div></li>
                <li class="after1"><img src="img/4.jpg" alt=""><div></div></li>
                <li class="after2"><img src="img/5.jpg" alt=""><div></div></li>
                <li class="after3"><img src="img/6.jpg" alt=""><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;
        }

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);
});

详细解析：

置了两个按钮，一个.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'，也就是正中心的位置

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

Sestid
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
实现两张图片的叠加
Sampson的专栏
03-28 5836
看了好多网上的图片叠加，说的最多的就是水印效果，但是我需要做的是两张图片完全重合的叠加，但是我的情况有点特殊，一张图片是从远程生成的，一张图片是本地生成的，所以在读图片的时候方法不一样，今天终于完成了，废话不多说，上代码： 首先是一个根据url网络网络url函数： public static BufferedImage RequestImage(String imageurl) throws
层叠样式的轮播效果
weixin_30879833的博客
01-10 1095
静态效果图如下： 1、定义静态样式：使用z-index来实现层级 2、将图片的类放在一个数组中，每次通过改变数组的排列来实现图片的变化 3、进入页面就要开始定时器；鼠标移入mouseover，清除定时器clearInterval；鼠标移出mouseleave，开始定时器setInterval HTML: <div class="display-left"> <...
纯 CSS 实现图片轮播
热门推荐
u011848617的专栏
05-27 10万+
理论基础 CSS3 animation 属性和 @keyframes 规则 主体思想 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器，展示容器大小为图片大小 给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值 注意事项 动画效果分为切换和停留两部分 自定义动画阶段与图片数量相关 动画各阶段偏移值与图片大小相关 本文中示例最后一个...
vue2+swiper——实现多图轮播+层叠轮播——技能提升
最新发布
yehaocheng520的博客
05-06 1344
vue2+swiper——实现多图轮播+层叠轮播——技能提升
html5基于TweenMax制作层叠图片跟随鼠标移动动画特效
06-10
html5基于TweenMax制作层叠图片跟随鼠标移动动画特效，鼠标移动时图片一张张出现跟随鼠标运动轨迹移动，渐渐又隐藏起来。
vue手写一个卡片化层叠轮播 五张 三张
sumimg的博客
09-06 5609
项目需求，需要写一个卡片化层叠的轮播，找了下插件都没有合适的，于是写了一个展示5个卡片的轮播 先看效果图： 5个卡片要计算各自的高度，宽度，利用相对定位计算出各自的位置 然后transition过渡来实现动画效果 由于开头卡片和末尾卡片的滑动整体性，我在config5数组开头和末尾加了2个隐藏的样式。使得有个滑出屏幕的效果 下面是我的代码： <template> <div> <transition name="fade"> <div @touchend
arcgis js地图叠加图片（影像）
Yunter_0821的博客
01-10 873
arcgis js地图叠加影像时，出现地图旋转后图片位置不对或图片变形，第一次图片加载不出来的问题
vue项目+js 实现层叠轮播图——基础积累
yehaocheng520的博客
08-29 2702
vue项目+js 实现层叠轮播图——基础积累
jQuery-图片视差轮播切换代码.zip
07-11
《jQuery实现图片视差轮播切换的深度解析》 在网页设计中，动态效果的运用可以极大地提升用户体验，其中图片轮播切换与视差滚动效果是常见且深受喜爱的设计手法。今天我们将深入探讨如何利用jQuery库来实现一个具有...
jquery-migrate
03-05
jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。 例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面...
jquery-migrate-1.2.1.js文件
10-23
`jquery-migrate-1.2.1.js` 文件是jQuery的一个辅助工具，它主要用于帮助开发者解决在升级到较新版本的jQuery时可能遇到的向后兼容性问题。这个插件的主要目的是为了警告开发者那些在新版本中已经被废弃或者更改的...
jQuery三张图片层叠轮播
01-17
使用jQuery三张图片层叠轮播
jquery层叠图片横向平滑移动轮播切换效果
11-17
jquery层叠图片横向平滑移动轮播切换效果
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
06-13
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
jquery-3.6.3相关及js文件
01-30
一共包括1、jquery-3.6.3.js文件。 2、jquery-3.6.3.min.js文件。3、jquery-migrate-3.4.0.js文件（主要用于解决jquery版本升级中的问题，是jquery版本升级所必须引用的文件）。4、jquery-migrate-3.4.0.min.js...
ft-carousel.js图片无缝轮播切换代码
06-09
"ft-carousel.js" 是一个专为此目的设计的JavaScript插件，它结合了jQuery库来实现图片的无缝轮播切换效果。下面将详细探讨这个插件的工作原理、实现方法以及相关文件的作用。 首先，`ft-carousel.js` 插件的核心...
jQuery实现层叠式炫酷图片轮播组件
yingzizizizizizzz的专栏
05-06 5739
功能一：进入界面，每4s图片切换 功能二：点击前后箭头能左右切换图片 功能三：点击下边的横线按钮能准确切换 功能四：点击相应图片也能切换 利用html+css3页面布局，其中用到了几个重要概念 1.position:absolut   脱离文档流概念 2.css3的新特性transform中的translate，使得图片能平滑平移，缩放 3.css3新特性transform-orig
P5.js：两张图像的叠加，一张每次刷新，一张不刷新
资资的博客
10-06 840
let x = 200; let y =200; let extraCanvas; function setup() { createCanvas(400,400); extraCanvas = createGraphics(400,400); extraCanvas.background(255,0,0); background(0); } function draw() { //iamge(extraCanvas,0,0); background(0); x += random(-5.
js 将多张图片合并成一张图片
Benxiaohai_311的博客
11-17 1450
其实就是将两张图片地址根据canvas组合在一起，我放到项目中因为会存在跨域问题，所以将图片转化成base64，后面还会带随机值，这样可避免图片跨域错误，正常情况下可以直接将图片放到canvas里面。
jQuery-----淘宝精品服饰案例
08-27
对不起，我无法提供淘宝精品服饰案例的 jQuery 代码。但是，我可以为您提供一些关于如何使用 jQuery 开发淘宝精品服饰案例的一般指导。 首先，您需要引入 jQuery 库。您可以在 HTML 文件中使用以下代码来引入 jQuery： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来，您可以使用 jQuery 来处理页面中的元素，例如添加、删除、修改元素的内容和样式等。下面是一个简单的例子，展示了如何使用 jQuery 选择元素，并为其添加点击事件： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>淘宝精品服饰案例</h1> <div id="item1">精品T恤</div> <div id="item2">精品裤子</div> <script> $(document).ready(function() { // 选择元素并添加点击事件 $("#item1").click(function() { alert("您点击了精品T恤！"); }); $("#item2").click(function() { alert("您点击了精品裤子！"); }); }); </script> </body> </html> ``` 在上面的例子中，我们使用 `$` 符号来表示 jQuery 对象，然后通过选择器选择元素（使用 `#` 表示选择 ID），并使用 `click` 方法为选定的元素添加点击事件。当用户点击相应的元素时，就会弹出一个提示框。 以上只是一个简单的示例，实际开发中您可以根据需求使用更多的 jQuery 方法和功能来构建淘宝精品服饰案例。希望对您有所帮助！如果您有更多问题，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值