jquery控制左右箭頭滾動圖片列表的實例

　　<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=gb" />
<script type="text/javascript" src="js/jqueryminjs"></script>
<title>jq控制左右箭頭滾動圖片列表</title>
<style type="text/css">
*{ margin:; padding:;fontsize: px;}
ul{ liststyle:none;}
slider{ width:px;border: px # solid; padding:px px;height: px;margin: px auto;position: relative;cursor: pointer;}
#slider_pic{ width: px;margin: auto;overflow: hidden;height: px;position: relative;}
prevnext{position: absolute;width: px;height: px;cursor: pointer;top:px;backgroundcolor: #daa; textalign: center;lineheight: px;fontweight: bold;color: #fff;}
next{right: px;}
no_click{backgroundcolor: #;}
#slider_pic li{float: left;marginright: px;}
#slider_pic ul{position: absolute;left: ;}

</style>
<script type="text/javascript">
$(function(){
var oPic=$(#slider_pic)find(ul);
var oImg=oPicfind(li);
var oLen=oImglength;
var oLi=oImgwidth();
var prev=$("#prev");
var next=$("#next");

oPicwidth(oLen*);//計算總長度
var iNow=;
var iTimer=null;
prevclick(function(){
if(iNow>){
iNow;

}
ClickScroll();
})
nextclick(function(){
if(iNow<oLen){
iNow++
}
ClickScroll();
})

function ClickScroll(){

iNow==? prevaddClass(no_click): prevremoveClass(no_click);
iNow==oLen?nextaddClass("no_click"):nextremoveClass("no_click");

oPicanimate({left:iNow*})
}

})

</script>
</head>

<body>
<div class="slider">
<span class="prev no_click" id="prev"><<</span>
<span class="next " id="next">>></span>
<div id="slider_pic">
<ul>
<li><img src="
<li><img src="
<li><img src="
<li><img src="
<li><img src="

</ul>
</div>

</div>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20399.html