jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换

阅读更多

jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换
1、可左右切换
2、可点击缩略图显示大图
3、缩略图多张滚动效果

直接贴代码

	
	
	
	
	

		

			
  高跟鞋与美女的时尚潮流 
			
  紫色复古风席卷欧美，你赶上潮流了吗 
			
  黑色与红色的诱惑，你更爱哪一种 
			
  是睡衣，是贴心，是性感 
			
  碎花连衣裙穿出你的风格 
			
  性感内衣，让你美丽俏佳人 
			
  男人的衣柜，穿出你的style，可以不帅，可以不酷，但必须有品味 
			
  夏日的海滩，阳光的诱惑 
			
  每个人都有自己的毛绒玩具，是怀念，是寄托 
			
  沙滩，型男，凉爽酷劲十足 
			
  当中国风十足的长裙遇上性感内衣 
			
  两只小兔白又白，爱吃萝卜和青菜 
			
  鲜花配美人，亦点缀那庭院一隅 
			
  莫森眼镜，挡不住的潮流 
		
	
	

		

			

			

			

			

			

			

			

			

			

			

			

			

			

			

		
	
	

css:

@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
div{text-align:left}
a img{border:0}
body{color:#333; text-align:center; font:12px "宋体";}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000; text-decoration:none}

/* 效果CSS开始 */
.mod18{width:677px;position:relative;margin:0 auto;}
.mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:10px;background:url(../images/prevBtn.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{top:250px;width:32px;height:48px;}
.mod18 #prev,.mod18 #next{top:490px;width:10px;height:16px;}
.mod18 #prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;}
.mod18 #nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;}
.mod18 .next{right:10px;background:url(../images/nextBtn.png) no-repeat;}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#fff;}
.mod18 .cf a{display:block;width:526px;height:377px;position:absolute;color:#fff;}
.mod18 .cf li span{display:block;width:486px;position:absolute;left:75px;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{width:526px; height:394px; padding-left:75px; padding-right:76px;position:relative;overflow:hidden; padding-top:40px;}
.mod18 .picBox ul{height:377px;position:absolute; left:0;}
.mod18 .picBox li{padding-left:75px; padding-right:1px; width:526px;height:377px;}
.mod18 .listBox{width:642px;height:100px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;}
.mod18 .listBox ul{height:88px;position:absolute; padding-left:12px;}
.mod18 .listBox li{width:127px;height:77px;cursor:pointer;position:relative; padding:5px 0 0 0;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:108px;height:77px;}
.mod18 .listBox img{border:3px solid #fff;}
.mod18 .listBox .on img{border:3px solid #CECDCC;}
.mod18 .listBox .on{background:url(../images/img_bg.jpg) center top no-repeat;}
.mod18 .listBox .on i{display:block;}

要引入两个js 请下载

• js.rar (19.8 KB)
• 下载次数: 0