闲来无事,使用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="http://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……