Jquery 焦點圖用於圖片展示效果代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery 焦點圖用於圖片展示效果代碼

編輯：JQuery特效代碼

效果圖如下所示:

演示代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Jquery圖片展示焦點圖</title> 
<style type="text/css"> 
*{ margin:0px; padding:0px; list-style:none; border:0px;} 
body{ font-size:12px; color:white;} 
#imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} 
#imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} 
#imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$imageShow=$('#imageShow'); 
$images=$('#imageSrc li',$imageShow); 
$imageSwitches=$('#imageSwitch li',$imageShow); 
if($images.size()>0){ 
init(); 
var timer=setInterval(autoSwitch,3000); 
$imageSwitches.each(function(index,item){ 
$(item).click(function(){ 
clearInterval(timer); 
setTimeout(function(){timer=setInterval(autoSwitch,3000)},3000); 
$imageSwitches.css('background-color','').eq(index).css('background-color','#E22E51'); 
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','#E22E51'); 
$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','#E22E51'); 
} 
}); 
</script> 
</head> 
<body> 
<div id="imageShow"> 
<ul id="imageSrc"> 
<li><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614463949.gif"></li> 
<li><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614464002.gif"></li> 
<li><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614464013.gif"></li> 
<li><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614464049.gif"></li> 
<li><img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201110/2011101614464127.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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:Jquery實現的table最後一行添加樣式的代碼
下一頁:jquery 輪換顯示第一小個例子

JQuery特效代碼

推薦17個優美新鮮的jQuery的工具提示插件: 在web開發當中，工具提示條對於完善web網站的用戶體驗至關重要。title屬性通常是用來幫助用戶了
jQuery中ajax的post()方法用法實例教程: 本文實例講述了jQuery中ajax的post()方法用法。分享給大家供大家參考。具體分析如下：$.
jQuery之自動完成組件的深入解析: 簡單實例. 代碼如下:<!DOCTYPE html PUBLIC -//W3C//DTD XH

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章