jquery写的一个单侧叠加轮播图

最新推荐文章于 2023-01-11 23:02:23 发布

王三花

最新推荐文章于 2023-01-11 23:02:23 发布

阅读量293

点赞数 1

分类专栏： js jq插件文章标签： js html5 jquery

本文链接：https://blog.csdn.net/CN_wangsanhua/article/details/117478121

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jq插件

2 篇文章 0 订阅

订阅专栏

由于工作中一直百度，捡现成的，所以今天找了好久的demo但是没找到合适的，最后打算自己试一试，就写出来一个简陋的demo，这个效果我管他叫单侧叠加轮播图，也有人叫卡片式轮播图，代码如下

html
|

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./jquery.js"></script>
</head>
<body>
    <div class="boDys">
        <div class="item">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
        <div class="item">
            5
        </div>
        <div class="item">
            6
        </div>
        <div class="item">
            7
        </div>
        <div class="item">
            8
        </div>
        <div class="item">
            9
        </div>
        <div class="item">
            10
        </div>

    </div>


    
    <script src="./index.js"></script>
</body>
</html>

css
|

.boDys{
    position: relative;
    width: 100%;
    height: 800px;
    transition: all .5s;
}
.item{
    width: 200px;
    height: 300px;
    line-height: 300px;
    border: 1px solid red;
    text-align: center;
    background-color: rgba(0,0,0, 1);
    transition: all .5s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-110%,-50%) scale( 0.7);
    z-index: -3;
    opacity: 0;
    background-color: rgba(119, 185, 32, 1);
}
.item:nth-child(1){
    transform: translate(-50%,-50%) scale( 1);
    z-index: 1;
    opacity: 1;
    background-color: rgb(85, 85, 85);
}
.item:nth-child(2){
    transform: translate(-70%,-50%) scale( 0.9);
    z-index: -1;
    opacity: 0.7;
    background-color: rgba(170, 54, 54, 1);
}
.item:nth-child(3){
    transform: translate(-90%,-50%) scale( 0.8);
    z-index: -2;
    opacity: 0.3;
    background-color: rgba(9, 243, 231, 1);

}

js
|

$(document).ready(function(){
    console.log(1)
    var start = 0;// 开始距离
    var over = 0;// 结束距离
    $('.boDys').mousedown(function(e){
    	e.preventDefault(); // 这里添加这个方法是因为我在用的过程发现内容如果放了大图，浏览器会有默认拖动图片的事件，就导致js事件无法触发...
        // console.log(e.clientX,"开始")
        start = e.clientX;
    });
    $('.boDys').mouseup(function(e){
    	e.preventDefault();// 同上
        // console.log(e.clientX,"结束")
        let Length = $('.item').length-1;// 获取有几个item
        over = e.clientX;
        if(start>over){
            // 向左
            // console.log($('.item').length)
            let child = $('.item').eq(Length)// 获取最后一个item
            $('.item').eq(Length).remove()// 移除
            $('.boDys').prepend(child)// 添加到第一个
            console.log("向左")
        }else{
            // 向右
            console.log("向右")
            let child = $('.item').eq(0)// 获取第一个item
            $('.item').eq(0).remove()// 移除
            $('.boDys').append(child)// 添加到最后
        }

    });
  });
//   通过css控制每一个的定位，这里我只需要显示前三个，就只写了前三个，
// 核心代码是css与js中moseup函数中的判断

这个demo真的很简陋，不过看懂之后随便怎么改，底部叠加，右侧叠加，顶部叠加，都可以

因为我不想花钱买别人的demo，所有我就就免费hhhh

王三花

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jquery写的一个单侧叠加轮播图

由于工作中一直百度，捡现成的，所以今天找了好久的demo但是没找到合适的，最后打算自己试一试，就写出来一个简陋的demo，这个效果我管他叫单侧叠加轮播图，也有人叫卡片式轮播图，代码如下html|<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫