您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS
层叠卡片幻灯片切换效果
- JS
- 2020-08-10
- 4102已阅读
简介层叠卡片幻灯片切换效果
最近需要用到这个效果,找了好久找到一个,发现手机无法使用。最后找到了这一个,保留起来备用,样式可以根据自己的需求修改。
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文件就不上传了,大家自行使用就可以,保存下来看效果吧。
上一篇:返回列表
下一篇:达到指定位置出现效果