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>