jquery 练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>金光丽园 A-c 全明户型 仅108万 超级便宜 - 金光丽园 - 青岛崂山区 - 城市房产</title>
<meta name="description" content="金光丽园最新二手房：房子108万元,地处崂山区,面积89平米,精装修" />
<style>
* { padding:0px; margin:0px}
li { float:left; list-style:none; 300px; height:225px; text-align:left; border:1px solid #666;}
.cursorl { cursor:pointer}
.cursorr { cursor:move}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($){
$.fn.picqh=function(iset){
iset=$.extend({
},iset||{})
var _self=this;
var liw=$(_self).find("li").width();
var lih=$(_self).find("li").height();
var lilen=$(_self).find("li").size();
var n=0; //当前图片的索引
$(_self).width((liw+2)*lilen)
.height(lih)
.wrap("<div class='_imgbox'></div>")
$("._imgbox").width(liw)
.height(lih)
.css({"overflow":"hidden","border":"1px solid #e1e1e1"});
$(_self).find("li img").mouseenter(function(e){
var thisw=$(this).width();
var thish=$(this).height();
$(this).parent("li").css({"position":"relative"})
$(this).css({"position":"absolute","left":"0"})
funa(e,this)
$(this).mousemove(function(e){funa(e,this)})
function funa(e,_this){
var exx=e.offsetX||e.layerX;
var eyy=e.offsetY||e.layerY;
if(n==0){
$(_this).addClass("cursorr")
.removeClass("cursorl")
}else if(n==lilen-1){
$(_this).addClass("cursorl")
.removeClass("cursorr")
}else{
if(exx>0 && exx<(thisw/2)){
$(_this).addClass("cursorl")
.removeClass("cursorr")
}else{
$(_this).addClass("cursorr")
.removeClass("cursorl")
}
}
}
}).click(function(){
if(this.className.indexOf("cursorl")!=-1){
n--;
n=n==-1?lilen-1:n;
}else{
n++;
n=n==lilen?0:n;
}
$("._imgbox").scrollLeft(n*liw);
})
return this;
}
})(jQuery)
jQuery(function($){
$(".dpleftul").picqh()
})
</script>
<body>
<ul class="dpleftul" style=" 1200px;">
<li><img src="http://image4.cityhouse.cn/qingdao/images/ha/big/PA031539SNE5570_DSCF4091.JPG" alt="颐和国际 "></li>
<li><img src="http://image4.cityhouse.cn/qingdao/images/ha/big/PA031539SNE5570_DSCF4095.JPG" alt="颐和国际 "></li>
<li><img src="http://image4.cityhouse.cn/qingdao/images/ha/big/contest_0_2010519144854.jpg" alt="颐和国际 "></li>
<li><img src="http://image4.cityhouse.cn/qingdao/images/ha/big/pa031539sne5570_2010030917264094.jpg" alt="颐和国际 "></li>
</ul>
</body>
</html>