Jquery实现简单的轮播效果(代码管用).docVIP

这篇文章主要介绍了Jquery实现简单的轮播效果(代码管用)的相关资料,需要的朋友可以参考下

直接给大家贴jquery代码了，具体代码如下所示：

lt;!DOCTYPEhtmlgt;

lt;htmllang=engt;

lt;headgt;

lt;metacharset=UTF-8gt;

lt;titlegt;Titlelt;/titlegt;

lt;linkrel=stylesheethref=css/index.cssgt;

lt;scriptsrc=js/jquery-1.11.3.jsgt;lt;/scriptgt;

lt;scriptsrc=js/baner.jsgt;lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;divclass=maingt;

lt;ahref=gt;lt;imgsrc=img/baner-1.jpgalt=gt;lt;/agt;

lt;ahref=gt;lt;imgsrc=img/baner-2.jpgalt=gt;lt;/agt;

lt;ahref=gt;lt;imgsrc=img/baner-3.jpgalt=gt;lt;/agt;

lt;ahref=gt;lt;imgsrc=img/baner-4.jpgalt=gt;lt;/agt;

lt;ulgt;

lt;ligt;1lt;/ligt;

lt;ligt;2lt;/ligt;

lt;ligt;3lt;/ligt;

lt;ligt;4lt;/ligt;

lt;/ulgt;

lt;/divgt;

lt;/bodygt;

lt;/htmlgt;nbsp;

/*************初始化************/

*{margin:0;padding:0;border:none;list-style:none}

/*********轮播左右居中*************/

.main{

width:1024px;

height:320px;

margin:0auto;

position:relative;

}

.maina{

position:absolute;

}

.mainaimg{

width:100%;

height:320px;

}

/***********左边小图标************/

.mainulli.selected{

background:#f97157;

}

.mainul{

position:absolute;

z-index:999;

top:120px;

left:20px;

}

.mainulli{

width:20px;

height:20px;

border-radius:50%;

background:#909090;

cursor:pointer;

text-align:center;

}nbsp;

/**

*CreatedbyAdministratoron16-3-12.

*/

/***********定义全局变量和定时器*************/

vart=null;

varn=0;/**动态变化**/

varcount;

/************************/

$(function(){

count=$(.maina).length;/*给动态变化的n备用*/

/**让不是轮播中的第一个隐藏**/

$(.maina:not(:first-child)).hide();

/*点击当前li当前li对应的图片显示出来*/

$(.mainulli).click(function(){

varindex=$(this).text()-1;

n=index;

console.log(n);

/*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/

$(.maina).filter(:visible).fadeOut(500).parent().children().eq(index).fadeIn(1000);

/*******聚焦，给当前li追加类，改变背景色*******/

$(this).addClass(selected);

/****同时移除当前li的所有兄弟的类名为selec