jQuery和CSS3实现堆叠式轮播图特效.zip资源-CSDN文库

共16个文件

jpg：7个

css：3个

ttf：1个

版权申诉

jquery

48 浏览量 2022-11-06 23:54:39 上传评论收藏 212KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery和CSS3实现堆叠式轮播图特效.zip （16个子文件）

132689877121132823

jQuery_CSS3_duidie

css

htmleaf-demo.css 6KB

style.css 4KB

normalize.css 2KB

2.jpg 20KB

1.jpg 44KB

img

2.jpg 18KB

1.jpg 29KB

3.jpg 24KB

5.jpg 9KB

4.jpg 38KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 4KB

jquery-1.11.0.min.js 94KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery和CSS3堆叠式轮播图特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>jQuery和CSS3堆叠式轮播图特效 <span>Illustrative Stacked Cards</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="https://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="https://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="container"> <div class="card-stack"> <a class="buttons prev" href="#"><</a> <ul class="card-list"> <li class="card" style="background: #c31432; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ "> <img src="img/1.jpg" alt="Sun" class="card-list__image"> <h3 class="card-list__text">Watch your way toward success as you excel above your competitors. </h3> </li> <li class="card" style="background: #00416A; background: -webkit-linear-gradient(to right, #FFE000, #799F0C, #00416A); background: linear-gradient(to right, #FFE000, #799F0C, #00416A); "> <img src="img/2.jpg" alt="Sun" class="card-list__image"> <h3 class="card-list__text">Relax and chill, we've got you covered :) </h3> </li> <li class="card" style="background: #1e3c72; background: -webkit-linear-gradient(to right, #2a5298, #1e3c72); background: linear-gradient(to right, #2a5298, #1e3c72); "> <img src="img/3.jpg" alt="Sun" class="card-list__image"> <h3 class="card-list__text"> Boost your social networking presence</h3> </li> <li class="card" style="background: #2C3E50; background: -webkit-linear-gradient(to right, #FD746C, #2C3E50); background: linear-gradient(to right, #FD746C, #2C3E50); "> <img src="img/4.jpg" alt="Sun" class="card-list__image"> <h3 class="card-list__text"> Be at the top of your competitors</h3> </li> <li class="card" style="background: #373B44; background: -webkit-linear-gradient(to right, #4286f4, #373B44); background: linear-gradient(to right, #4286f4, #373B44); "> <img src="img/5.jpg" alt="Sun" class="card-list__image"> <h3 class="card-list__text"> Create contents for your online courses</h3> </li> </ul> <a class="buttons next" href="#">></a> </div> </div> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script> var $card = $('.card'); var lastCard = $(".card-list .card").length - 1; $('.next').click(function(){ var prependList = function() { if( $('.card').hasClass('activeNow') ) { var $slicedCard = $('.card').slice(lastCard).removeClass('transformThis activeNow'); $('ul').prepend($slicedCard); } } $('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow'); setTimeout(function(){prependList(); }, 150); }); $('.prev').click(function() { var appendToList = function() { if( $('.card').hasClass('activeNow') ) { var $slicedCard = $('.card').slice(0, 1).addClass('transformPrev'); $('.card-list').append($slicedCard); }} $('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow'); setTimeout(function(){appendToList();}, 150); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉