这个插件的要点之处就在JQuery-1.4.2.js的发布添加的新函数data的应用，所以jquery库一定要是1.4.2的版本
另一方面就是css的编写，setInterval和setTimeout的用法，前者是每隔多长时间执行一次，后者是多长时间执行一次；
关于setTimeout的用法 有二种形式 1 setTimeout(code,interval) 中的code是字符串
2 setTimeout(func,interval,args) 中的func是函数
下面就是代码了
代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>jquery slidepictrue</TITLE>
<style type="text/css">
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; color:white}
#imageShow { position:relative;z-index:3;overflow:hidden;width:586px;height:150px }
#imageShow #imageSwitch { position:absolute;right:0px;bottom:0px;padding-left:50px;z-index:4;
background-color:#C08A93;filter:Alpha(opacity=70); opacity:0.7;}
#imageShow #imageSwitch li{ float:left;border-left:1px solid white;height:14px;width:30px;
text-align:center;line-height:14px;}
</style>
</HEAD>
<BODY>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$imageShow=$("#imageShow");
$images=$("#imageSrc li",$imageShow);
$imageSwitches=$("#imageSwitch li",$imageShow);
//判断图片的张数，如果有图片
if($images.size()>0){
init();
//利用setInterval设置延迟时间，一直执行每隔1秒执行autoSwitch函数，
var timer=setInterval(autoSwitch,1000);
//遍历函数
$imageSwitches.each(function(index,item){
$(item).click(function(){
clearInterval(timer);
// setTimeout有二种形式,第一种 setTimeout(code,interval)，code是字符串，第二种
// setTimeout(func,interval,args),func是函数表达式，而不是语句
setTimeout(function(){timer=setInterval(autoSwitch,1000)},1000);
$imageSwitches.css('background-color','').eq(index).css('background-color','#FF3366');
//现在用到了data函数，用于图片和下表对照
if(index!=$imageShow.data('show')){
$imageShow.data('show',index);
$images.hide().eq(index).fadeIn('slow');
}
})
})
}
//自动显示的函数
function autoSwitch(){
$nowIndex=$imageShow.data('show')+1;
if($images.size()>$nowIndex){
$imageSwitches.css('background-color','').eq($nowIndex).css('background-color','#FF3366');
$imageShow.data('show',$nowIndex);
$images.hide().eq($nowIndex).fadeIn('slow');
}else{
init();
}
}
//初始化到第一张图片开始
function init(){
$imageShow.data('show',0);
$images.hide().eq(0).fadeIn('slow');
$imageSwitches.css('background-color','').eq(0).css('background-color','#FF3366');
}
});
</script>
<div id="imageShow">
<ul id="imageSrc">
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_1.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_2.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_3.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_4.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_5.gif"></li>
</ul>
<ul id="imageSwitch">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>jquery slidepictrue</TITLE>
<style type="text/css">
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; color:white}
#imageShow { position:relative;z-index:3;overflow:hidden;width:586px;height:150px }
#imageShow #imageSwitch { position:absolute;right:0px;bottom:0px;padding-left:50px;z-index:4;
background-color:#C08A93;filter:Alpha(opacity=70); opacity:0.7;}
#imageShow #imageSwitch li{ float:left;border-left:1px solid white;height:14px;width:30px;
text-align:center;line-height:14px;}
</style>
</HEAD>
<BODY>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$imageShow=$("#imageShow");
$images=$("#imageSrc li",$imageShow);
$imageSwitches=$("#imageSwitch li",$imageShow);
//判断图片的张数，如果有图片
if($images.size()>0){
init();
//利用setInterval设置延迟时间，一直执行每隔1秒执行autoSwitch函数，
var timer=setInterval(autoSwitch,1000);
//遍历函数
$imageSwitches.each(function(index,item){
$(item).click(function(){
clearInterval(timer);
// setTimeout有二种形式,第一种 setTimeout(code,interval)，code是字符串，第二种
// setTimeout(func,interval,args),func是函数表达式，而不是语句
setTimeout(function(){timer=setInterval(autoSwitch,1000)},1000);
$imageSwitches.css('background-color','').eq(index).css('background-color','#FF3366');
//现在用到了data函数，用于图片和下表对照
if(index!=$imageShow.data('show')){
$imageShow.data('show',index);
$images.hide().eq(index).fadeIn('slow');
}
})
})
}
//自动显示的函数
function autoSwitch(){
$nowIndex=$imageShow.data('show')+1;
if($images.size()>$nowIndex){
$imageSwitches.css('background-color','').eq($nowIndex).css('background-color','#FF3366');
$imageShow.data('show',$nowIndex);
$images.hide().eq($nowIndex).fadeIn('slow');
}else{
init();
}
}
//初始化到第一张图片开始
function init(){
$imageShow.data('show',0);
$images.hide().eq(0).fadeIn('slow');
$imageSwitches.css('background-color','').eq(0).css('background-color','#FF3366');
}
});
</script>
<div id="imageShow">
<ul id="imageSrc">
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_1.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_2.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_3.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_4.gif"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_5.gif"></li>
</ul>
<ul id="imageSwitch">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</BODY>
</HTML>
浙公网安备 33010602011771号