jQuery图片幻灯片展示

  闲来无事，使用jQuery做了一个图片幻灯片，贴出来大家都看看，多扔砖头……

  先说前台吧，很简单，如下所示：

<div class="slidBox">
	<div class="slidBoxImages">
	        <a href="http://www.baidu.com" target="_blank"><img src="1.jpg" title="" alt="" /></a>
		<a href="http://www.youdao.com" target="_blank"><img src="2.jpg" title="" alt="" /></a>
		<a href="http://www.bing.com" target="_blank"><img src="3.jpg" title="" alt="" /></a>
		<a href="http://www.google.cn" target="_blank"><img src="4.jpg" title="" alt="" /></a>
	</div>
	<p>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<span></span>
	</p>
</div>

  再说css，如下： 

body{font-size:12px; background-color:#FFF; text-align:center;}
#page{ width:950px; margin:0 auto; text-align:left;}
a,a:link,a:visited,a:hover,a:active{text-decoration:none;}
p,a img{margin:0; padding:0;}
a img{ border:none;}

.slidBox{padding:4px; width:410px; border:1px solid red;}
.slidBoxImages{position:relative; width:410px; height:300px; overflow:hidden; top:0; left:0; }
.slidBoxImages img{width:410px; height:300px;}
.slidBox p{ background:#F5F5F5; height:18px; line-height:18px; margin-top:2px; padding:2px 10px; font-weight:bold; position:relative;}
.slidBox p span{float:right; margin-right:60px;}
.slidBox p a { display:block; width:18px; height:18px; background:transparent url(t1.jpg) no-repeat; position:relative; left:4px; float:left;}
.slidBox p a.current{background-image:url(t2.jpg);}

  很简单，总体上一个slidBox，上面一部分是图片列表，下面是指示器，指示当前所展示的图片，里面还有一个span，是图的说明。

  现在来说js，嘿嘿，有一点，千万别忘了加载jQuery，题目，就是jQuery做的，这个可是很重要的

 

<script type="text/javascript" src="https://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js"></script>

  然后我们新建一个文件吧，写咱们自己js，代码如下：

$(document).ready(function(){
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图01";
slidetext[1]="焦点图02";
slidetext[2]="焦点图03";
slidetext[3]="焦点图04";

//幻灯片自动播放的速度
var IntervalSpeed=5000;
//幻灯片渐隐的速度
var slidOutSpeed=1000;
//幻灯片渐显的速度
var slidInSpeed=2000;
//总的幻灯片的数量
var picNum=4;
//幻灯片播放到的位置,默认从第一个开始播放
var nowPosition=Math.floor(Math.random()*picNum);
$(".slidBox p a").eq(nowPosition).addClass("current");
$(".slidBox p span").text(slidetext[nowPosition]);
//幻灯片自动播放
var interval = setInterval(playIt,IntervalSpeed);
function playIt(){
	//当前幻灯片消失，下一个显现
	$(".slidBoxImages a img").fadeOut(slidOutSpeed,function(){				
		$(".slidBoxImages a img").fadeIn(slidInSpeed);
	});
	$(".slidBox p a.current").removeClass("current");
	//改变大图说明和下面的小按钮，以及点击大图之后跳转到的链接
	nowPosition=(nowPosition+1)%picNum;
	$(".slidBox p a").eq(nowPosition).addClass("current");
	$(".slidBox p span").text(slidetext[nowPosition]);
}
$(".slidBox p a").mouseover(function(){
	clearInterval(interval);
	nowPosition=$(this).index(".slidBox p a")-1;
	playIt();
});	
$(".slidBox p a").mouseout(function(){	
	interval = setInterval(playIt,IntervalSpeed);
});
});

  slidetext保存各个图片的说明，nowPosition保存图片当前滑动到的位置。有一个interval，设置的图片多长时间轮换一次，，每次执行的playIt这个函数。每执行一次，nowPosition就会增加一。当鼠标放在指示器上面时候，就会移动到指定的位置。mouseover和mouseout函数是清除和重新启动那个interval的。

 

  嘿嘿，这些其实看起来都不难，只要你会基本的jQuery就ok……