Jquery中幻灯片效果的简单实现

在用Jquery写一个幻灯片效果的时候参考了网上上一些实例，写了我的一个简单实现。

首先要写一个CSS的结构，这样在JSP页面中可以方面循环生成图片，避免固定图片。

<div id="outer">

<div id="inside">

<div id="imageDiv">

<img src="" alt=""  title=""/>

</div>

</div>

</div>

<Style>

#outer{position:relative;width:500px;overflow:hidden;}//一定要是position为relative，宽度要设置，不然无法起到遮盖效果

#inside{position:absolute;width:auto;}//一定要设置为aboslute,不然不容易设置left属性

#imageDiv{position:realtive;float:left;}

</Style>

首先要获取imageDiv的宽度，图片数目，然后用计算出inside的实际宽度，如果不这样，inside的宽度就是outer的宽度，遮盖效果就达不到了。然后设置全部变量：leftPosition(inside的left距离),imageNumber(图片数目)，count(最左边显示的索引值)，distance(每次移动的距离，也就是imageDiv的outerWidth(true)),

然后每次leftPosition减少或者增加一个distance的距离，然后在在用jquery对象的animate({},300)函数可以了。

 

<script>

var NumberFlag=8;//图片达到多少时候才出现幻灯效果

 

var formers=jq('#outer #inside');

var count=jq('#inside #imageDiv').size();

jq('#inside').width(count*(jq('#imageDiv').outerWidth(true)));

var personNumbers=count;

var leftPosition=0;

var distance=jq('#imageDiv').eq(0).outerWidth(true);

var index=0;

if(personNumbers <=NumberFlag){

jq('#goLeft').hide();

jq('#goRight').hide();

}

jq('#goLeft').click(function(){

if(personNumbers >= NumberFlag  && count >NumberFlag){

leftPosition=leftPosition-distance;

   jq('#inside').animate({left:leftPosition},300,null);    

count--;

}

});

jq('#goRight').click(function(){

if(personNumbers >=NumberFlag && count< personNumbers){

leftPosition=leftPosition+distance;

jq('#inside').animate({left:leftPosition},300,null);

count++;

}

});

 

</script>