jquery 图片切换控制scrollleft

最新推荐文章于 2023-06-17 13:58:23 发布

hdchangchang

最新推荐文章于 2023-06-17 13:58:23 发布

阅读量1.1k

点赞数

分类专栏： jquery js jquery 练习示例

本文链接：https://blog.csdn.net/hdchangchang/article/details/8448945

版权

jquery 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

js jquery 练习示例

16 篇文章 0 订阅

订阅专栏

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;  width: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="width: 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>

hdchangchang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片切换控制scrollleft

jquery 练习金光丽园 A-c 全明户型仅108万超级便宜 - 金光丽园 - 青岛崂山区 - 城市房产* { padding:0px; margin:0px}li { float:left; list-style:none; width:300px; height:225px; text-align:
复制链接

扫一扫