jQuery和CSS3堆叠式轮播图特效

作者：管理员

发布时间：2020/2/27 15:00:57

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=907

 

　　简要教程

　　这是一款jQuery和CSS3堆叠式轮播图特效。该轮播图通过css将图片堆叠到一起，然后通过jquery代码来控制在切换时，不断的显示下一张图片。

　　使用方法

　　在头部引入style.css文件。

　　<linkrel="stylesheet"href="./css/style.css">

　　HTML结构

　　<divclass="container">

　　<divclass="card-stack">

　　<aclass="buttonsprev"href="#"><</a>

　　<ulclass="card-list">

　　<liclass="card"style="background:#c31432;/*fallbackforoldbrowsers*/

　　background:-webkit-linear-gradient(toright,#240b36,#c31432);/*Chrome10-25,Safari5.1-6*/

　　background:linear-gradient(toright,#240b36,#c31432);/*W3C,IE10+/Edge,Firefox16+,Chrome26+,Opera12+,Safari7+*/

　　">

　　<imgsrc="https://svgshare.com/i/E90.svg"alt="Sun"class="card-list__image">

　　<h3class="card-list__text">Watchyourwaytowardsuccessasyouexcelaboveyourcompetitors.</h3>

　　</li>

　　<liclass="card"style="background:#00416A;

　　background:-webkit-linear-gradient(toright,#FFE000,#799F0C,#00416A);

　　background:linear-gradient(toright,#FFE000,#799F0C,#00416A);

　　">

　　<imgsrc="https://svgshare.com/i/E9H.svg"alt="Sun"class="card-list__image">

　　<h3class="card-list__text">Relaxandchill,we'vegotyoucovered:)</h3>

　　</li>

　　<liclass="card"style="background:#1e3c72;

　　background:-webkit-linear-gradient(toright,#2a5298,#1e3c72);

　　background:linear-gradient(toright,#2a5298,#1e3c72);

　　">

　　<imgsrc="https://svgshare.com/i/E86.svg"alt="Sun"class="card-list__image">

　　<h3class="card-list__text">Boostyoursocialnetworkingpresence</h3>

　　</li>

　　<liclass="card"style="background:#2C3E50;

　　background:-webkit-linear-gradient(toright,#FD746C,#2C3E50);

　　background:linear-gradient(toright,#FD746C,#2C3E50);

　　">

　　<imgsrc="https://svgshare.com/i/E8Y.svg"alt="Sun"class="card-list__image">

　　<h3class="card-list__text">Beatthetopofyourcompetitors</h3>

　　</li>

　　<liclass="card"style="background:#373B44;

　　background:-webkit-linear-gradient(toright,#4286f4,#373B44);

　　background:linear-gradient(toright,#4286f4,#373B44);

　　">

　　<imgsrc="https://svgshare.com/i/E9z.svg"alt="Sun"class="card-list__image">

　　<h3class="card-list__text">Createcontentsforyouronlinecourses</h3>

　　</li>

　　</ul>

　　<aclass="buttonsnext"href="#">></a>

　　</div>

　　</div>

　　javascript

　　var$card=$('.card');

　　varlastCard=$(".card-list.card").length-1;

　　$('.next').click(function(){

　　varprependList=function(){

　　if($('.card').hasClass('activeNow')){

　　var$slicedCard=$('.card').slice(lastCard).removeClass('transformThisactiveNow');

　　$('ul').prepend($slicedCard);

　　}

　　}

　　$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');

　　setTimeout(function(){prependList();},150);

　　});

　　$('.prev').click(function(){

　　varappendToList=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);

　　});

关键字：jQuery