ajax轮播效果,jQuery实现的图片轮播效果完整示例

本文实例讲述了jQuery实现的图片轮播效果。分享给大家供大家参考，具体如下：

图片轮播

*{ padding: 0; margin: 0;}

li{ list-style-type: none;}

body{ margin: 50px;}

a img{ border:none;}

.wrap{

width: 500px;

height: 350px;

border: 3px solid #f00;

position:relative;

overflow: hidden;

}

.wrap ul{

width: 2500px;

position: absolute;

left: 0;

top: 0;

}

.wrap ul li{

float: left;

width: 500px;

}

.wrap ol{

position: absolute;

bottom: 10px;

right: 10px;

}

.wrap ol li{

float: left;

width: 16px;

height: 16px;

line-height: 16px;

text-align: center;

border: 1px solid #fc0;

background: #000;

color: #fff;

margin-right: 3px;

cursor: pointer;

}

.wrap ol li.current{

background: #fff;

color: #000;

}

.wrap .introduce{

height: 30px;

line-height: 30px;

width: 350px;

background: rgba(0,0,0,0.5);

color: #fff;

position: absolute;

bottom: 10px;

left: 0;

/*opacity: 0.5;

filter:alpha(opacity=50); */

}

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

111111

$(function(){

var oul = $('.wrap ul');

var ali = $('.wrap ul li');

var numLi = $('.wrap ol li');

var aliWidth = $('.wrap ul li').eq(0).width();

var _now = 0; //这个是控制数字样式的计数器

var _now2 = 0; //这个是控制图片运动距离的计数器

var timeId;

var aimg = $('.wrap ul img');

var op = $('.wrap p');

numLi.click(function(){

var index = $(this).index();

_now = index;

_now2=index;

var imgAlt = aimg.eq(_now).attr('alt');

op.html(imgAlt);

$(this).addClass('current').siblings().removeClass();

oul.animate({'left':-aliWidth*index},500);

});

/**

* [slider description] 图片运动的函数

* @return {[type]} [description] 无返回值

*/

function slider(){

if(_now==numLi.size()-1){

ali.eq(0).css({

'position':'relative',

'left': oul.width()

});

_now=0;

}else{

_now++;

}

_now2++;

numLi.eq(_now).addClass('current').siblings().removeClass();

var imgAlt = aimg.eq(_now).attr('alt');

op.html(imgAlt);

oul.animate({'left':-aliWidth*_now2},500,function(){

if(_now==0){

ali.eq(0).css('position','static');

oul.css('left',0);

_now2=0;

}

});

}

timeId = setInterval(slider,1500);

/*$('.wrap').mouseover(function(){

clearInterval(timeId);

});

$('.wrap').mouseout(function(){

timeId = setInterval(slider,1500);

});*/

$('.wrap').hover(function(){

clearInterval(timeId);

},function(){

timeId = setInterval(slider,1500);

});

});

运行效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。