您现在的位置是：首页 > 学无止境> JS网站首页学无止境JS

层叠卡片幻灯片切换效果

  • Lee D
  • JS
  • 2020-08-10
  • 4102已阅读
js   幻灯片   层叠卡片  
简介层叠卡片幻灯片切换效果

层叠.jpg

最近需要用到这个效果，找了好久找到一个，发现手机无法使用。最后找到了这一个，保留起来备用，样式可以根据自己的需求修改。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层叠卡片幻灯片切换效果</title>
    <link rel="stylesheet" href="css/cooldog.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<body>

<div>
    <div>
      <ul>
        <li><a href="#"><img src="picture/1.png"></a></li>
        <li><a href="#"><img src="picture/2.png"></a></li>
        <li><a href="#"><img src="picture/3.png"></a></li>
        <li><a href="#"><img src="picture/4.png"></a></li>
        <li><a href="#"><img src="picture/5.png"></a></li>
        <li><a href="#"><img src="picture/6.png"></a></li>
        <li><a href="#"><img src="picture/7.png"></a></li>
      </ul>
    </div>
    <a href="javascript:;"><i class="iconfont icon-zuoyoujiantou"></i></a>
    <a href="javascript:;"><i class="iconfont icon-zuoyoujiantou-copy-copy"></i></a>
    <a href="javascript:;"><i class="iconfont icon-icon-test"></i></a>
    <div class="buttons clearfix">
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cooldog.js"></script>

</body>
</html>

cooldog.css:

*{margin:0;padding:0;list-style:none;text-decoration:none}
body{background-color:#252525}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;font-size:0}
.Cooldog_container{width:750px;height:220px;margin:200px auto 0;position:relative;overflow:hidden}
.Cooldog_container .Cooldog_content{position:absolute;width:498px;height:220px;top:0;left:50%;margin-left:-249px}
.Cooldog_container .Cooldog_content li{position:absolute;top:0;left:0;width:498px;height:220px;transition:all .3s ease}
.Cooldog_container .Cooldog_content li img{width:100%;height:100%;vertical-align:middle;display:inline-block}
.Cooldog_container .btn_left,.Cooldog_container .btn_right{display:none;width:126px;height:179px;position:absolute;top:21px;z-index:50;color:#fff;line-height:179px}
.Cooldog_container .btn_left{text-align:left;left:0}
.Cooldog_container .btn_right{text-align:right;right:0}
.Cooldog_container i{font-size:50px}
.Cooldog_container .btn_close{position:absolute;top:0;right:0;width:20px;height:20px;display:none;line-height:20px;text-align:center;background-color:#bcb9b9;color:#fff}
.Cooldog_container .btn_close i{font-size:18px}
.Cooldog_container .buttons{width:370px;height:5px;line-height:5px;position:absolute;bottom:5px;left:50%;margin-left:-185px;z-index:80}
.Cooldog_container .buttons a{float:left;width:40px;height:5px;background-color:#898f94;margin-right:15px}
.Cooldog_container .buttons a.color{background-color:#92ffff}
.Cooldog_container .buttons a:last-child{margin-right:0}
.p1{transform:translate3d(-577px,0,0) scale(.81);opacity:.4;z-index:1}
.p2{transform:translate3d(-325px,0,0) scale(.81);transform-origin:0 50%;opacity:.6;z-index:2}
.p3{transform:translate3d(-125px,0,0) scale(.81);transform-origin:0 50%;opacity:.8;z-index:3}
.p4{transform:translate3d(0,0,0) scale(1);opacity:1;z-index:4}
.p5{transform:translate3d(220px,0,0) scale(.81);transform-origin:0 50%;opacity:.8;z-index:3}
.p6{transform:translate3d(425px,0,0) scale(.81);transform-origin:0 50%;opacity:.6;z-index:2}
.p7{transform:translate3d(625px,0,0) scale(.81);transform-origin:0 50%;opacity:.4;z-index:1}

cooldog.js:

$(function () {
    //鼠标移入显示左右箭头和关闭按钮
    var timer = '';
    $('.Cooldog_container').mouseover(function () {
        $('.btn_left').show('1000');
        $('.btn_right').show('1000');
        $('.btn_close').show('1000');
        clearInterval(timer);
    }).mouseleave(function () {
        $('.btn_left').hide('1000');
        $('.btn_right').hide('1000');
        $('.btn_close').hide('1000');
        timer = setInterval(btn_right, 4000);
    });
    
    //点击关闭隐藏轮播图
    $('.btn_close').on('click', function () {
        $('.Cooldog_container').hide('1000');
    });
    
    var arr = ['p1', 'p2', 'p3', 'p4', 'p5', 'p6', 'p7'];
    var index = 0;
    
    //上一张
    $('.btn_left').on('click', function () {
        btn_left();
    });
    
    //下一张
    $('.btn_right').on('click', function () {
        btn_right();
    });
    
    //图片自动轮播
    timer = setInterval(btn_right, 4000);
    
    //点击上一张的封装函数
    function btn_left() {
        arr.unshift(arr[6]);
        arr.pop();
        $('.Cooldog_content li').each(function (i, e) {
            $(e).removeClass().addClass(arr[i]);
        })
        index--;
        if (index < 0) {
            index = 6;
        }
        show();
    }
    
    //点击下一张的封装函数
    function btn_right() {
        arr.push(arr[0]);
        arr.shift();
        $('.Cooldog_content li').each(function (i, e) {
            $(e).removeClass().addClass(arr[i]);
        })
        index++;
        if (index > 6) {
            index = 0;
        }
        show();
    }
    
    //点击底部的按钮切换图片
    $('.buttons a').each(function () {
        $(this).on('click', function () {
            var myindex = $(this).index();
            var mindex = myindex - index;
            if (mindex == 0) {
                return;
            }
            else if (mindex > 0) {
                var newarr = arr.splice(0, mindex);
                //$.merge() 函数用于合并两个数组内容到第一个数组
                arr = $.merge(arr, newarr);
                $('.Cooldog_content li').each(function (i, e) {
                    $(e).removeClass().addClass(arr[i]);
                })
                index = myindex;
                show();
            }
            else if (mindex < 0) {
                //reverse() 方法用于颠倒数组中元素的顺序。
                arr.reverse();
                var oldarr = arr.splice(0, -mindex);
                arr = $.merge(arr, oldarr);
                arr.reverse();
                $('.Cooldog_content li').each(function (i, e) {
                    $(e).removeClass().addClass(arr[i]);
                })
                index = myindex;
                show();
            }
        })
    })
    
    //底部按钮高亮
    function show() {
        $('.buttons a').eq(index).addClass('color').siblings().removeClass('color');
    }
})

图片和jquery文件就不上传了，大家自行使用就可以，保存下来看效果吧。


在线预览

上一篇：返回列表

下一篇：达到指定位置出现效果

相关文章

特别推荐

  • 层叠卡片幻灯片切换效果 阅读

  • css光泽一闪而过的效果 阅读

  • 幻灯片效果 阅读

推荐文章

点击排行

标签云

友情链接

Top