下面小编就为大家带来一篇Jquery实现的简单轮播效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考

Jquery实现的简单轮播效果【附实例】

--------------------------------------------------------------------------

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

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

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

.main{

width: 1024px;

height: 320px;

margin: 0 auto;

position: relative;

}

.main a{

position: absolute;

}

.main a img{

width: 100%;

height: 320px;

}

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

.main ul li.selected{

background: #f97157;

}

.main ul{

position: absolute;

z-index: 999;

top: 120px;

left: 20px;

}

.main ul li{

width: 20px;

height: 20px;

border-radius: 50%;

background: #909090;

cursor: pointer;

text-align: center;

}

----------------------------------------------------------------------------

/**

* Created by Administrator on 16-3-12.

*/

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

var t=null;

var n=0;/**动态变化**/

var count;

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

$(function(){

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

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

$(".main a:not(:first-child)").hide();

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

$(".main ul li").click(function(){

var index=$(this).text()-1;

n=index;

console.log(n);

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

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

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

$(this).addClass("selected");

/****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/

$(this).siblings().removeClass("selected");

});

/***定义定时器3秒执行一次****/

t=setInterval("autoMove()",3000);

/****当鼠标进入时候定时器停止，移除时候定时器开启****/

$(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});

});

/***定义自动轮播函数****/

function autoMove(){

if(n>=(count-1)){

n=0;

}else{

++n;

}

/*****给li执行匹配的事件*****/

$(".main ul li").eq(n).trigger("click");

}

以上这篇Jquery实现的简单轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考