第jQuery實現(xiàn)手風琴小案例本文實例為大家分享了jQuery實現(xiàn)手風琴的具體代碼，供大家參考，具體內(nèi)容如下

代碼演示效果：

1.運用jQuery，動畫樣式進行輪播圖切換

2.前提，需要引入animate.css（官網(wǎng)下載就有）

HTML代碼：

head

metacharset="UTF-8"

title手風琴/title

linkrel="stylesheet"href="../animate.css"

linkrel="stylesheet"href="css/index.css"

scriptsrc="../jquery-3.1.0.js"/script

!--scriptsrc="js/手風琴index.js"/script--

/head

body

div/div

div/div

div/div

div/div

div

lidivp穿越火線/p/div/li

lidivp王者榮耀/p/div/li

lidivp使命召喚/p/div/li

lidivp英雄聯(lián)盟/p/div/li

/ul

/div

/body

script代碼：

script

$(function(){

$("li").mouseenter(function(){

//stop()阻止動畫效果

$(this).stop().animate({width:"700px"},1000,"linear").fadeIn();

$(this).siblings("li").stop().animate({width:"100px"},1000,"linear").fadeIn();

$(".bg").eq($(this).index()).siblings(".bg").stop().fadeOut();

$(".bg").eq($(this).index()).stop().animate({top:"700px"},400,"linear").fadeIn();

});

/script

css代碼：

margin:0;

padding:0;

html,body,.bg{

height:700px;

width:1400px;

overflow:hidden;

body{

position:relative;

display:none;

.bg:nth-child(1){

background:url("../images/1.jpg")no-repeatcenter/cover;

.bg:nth-child(2){

background:url("../images/2.jpg")no-repeatcenter/cover;

.bg:nth-child(3){

background:url("../images/3.jpg")no-repeatcenter/cover;

.bg:nth-child(4){

background:url("../images/4.jpg")no-repeatcenter/cover;

/*大背景顯示*/

.bg-active{

display:block;

.main{

position:absolute;

width:1000px;

height:400px;

/*background-color:pink;*/

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

.mainul{

list-style:none;

.mainulli{

float:left;

width:100px;

height:400px;

transition:right1s;

/*小背景顯示*/

.mainulli.li-active{

width:700px;

height:400px;

.mainulli:nth-child(1){

background:url("../images/1.jpg")no-repeatcenter/cover;

.mainulli:nth-child(2){

background:url("../images/2.jpg")no-repeatcenter/cover;

.mainulli:nth-child(3){

background:url("../images/3.jpg")no-repeatcenter/cover;

.mainulli:nth-child(4){

background:url("../images/4.jpg")no-repeatcenter/cover;

.mainullidiv{

height:400px;

width:100px;

background-color:rgba(0,0,0,.5);

.main