jquery 簡單的圖片展示效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 簡單的圖片展示效果

jquery 簡單的圖片展示效果

編輯：JQuery特效代碼

<html> 
<head> 
<title>jquery練習——簡單的圖片結果展示效果--cnblogs libsource/</title> 
<style> 
#cfoot ul,#cfoot li{ 
margin:0;padding:0;list-style-type:none; 
} 
#cdiv{ 
width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; 
} 
#cfoot li{ 
display:inline-block;width:100px;height:100px;line-height:100px;float:left;text-align:center;border:1px solid 
#D5DDF9;margin-right:20px;cursor:pointer; 
} 
#cfoot li.cur{ 
border:1px solid #ffcc33; 
} 
#cleft,#cright{ 
float:left;text-align:center;width:50px;height:500px;display:inline-block;cursor:pointer; 
} 
#cright{ 
float:right; 
} 
.clearfloat{ 
clear: both;height: 0;font-size: 1px;line-height: 0px; 
} 
</style> 
</head> 
<body> 
<div id="cdiv"> 
<div id="cright">> 
</div> 
<div id="cleft">< 
</div> 
<div id="cmain"> 
圖片1 
</div> 
</div> 
<br class="clearfloat"/> 
<div id="cfoot"> 
<ul> 
<li class="cur" pv="圖片1">縮略1</li> 
<li pv="圖片2">縮略2</li> 
<li pv="圖片3">縮略3</li> 
<li pv="圖片4">縮略4</li> 
<li pv="圖片5">縮略5</li> 
</ul> 
</div> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
function setContent(){ 
var curobj=$("#cfoot li[pv]:first"); 
if(curobj.length>0) 
$("#cmain").html(curobj.addClass("cur").attr('pv')); 
}; 
function move(position){ 
position=position||"prev"; 
eval('var curobj=$("#cfoot li.cur[pv]");if(curobj.'+position+'("#cfoot li").length>0){$("#cmain").html 
(curobj.removeClass("cur").'+position+'("#cfoot li").addClass("cur").attr("pv"));}'); 
} 
$(function(){ 
$(document).keydown(function (e) { 
switch(e.which){ 
case 37: 
move('prev'); 
break; 
case 39: 
move('next'); 
break; 
default: 
break; 
} 
}); 
$("#cleft").click(function(){move('prev');}); 
$("#cright").click(function(){move('next');}); 
$("#cfoot li").click(function(){ 
$("#cfoot li.cur").removeClass("cur"); 
$("#cmain").html($(this).addClass("cur").attr('pv')); 
}); 
}); 
</script> 
</body> 
</html>

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

上一頁:JQuery讀取XML文件數據並顯示的實現代碼
下一頁:jQuery Attributes(屬性)的使用(二、類篇)

JQuery特效代碼

15個jquery常用方法、小技巧分享: 1.獲取td的行標和列標代碼如下:$(this).prop(cellIndex)2.判斷是否是回車
打造基於jQuery的高性能TreeView(asp.net): 根據我的項目實踐情況，主要是幾個關鍵點：1：支持靜態的樹，即一次性將全部數據加載到客戶端。2：異步樹
jquery實現圖片翻頁效果: . 代碼如下:$(function($){ $.fn.chang

DIV CSS 佈局教程網

相關文章