最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery hScrollPane水平滚动条美化插件商品图片横行展示

来源:http://www.erdangjiade.com/js/1164.html 二当家的 2017-02-19 16:33浏览(851)

jquery hScrollPane水平滚动条美化插件商品图片横行展示效果实现源码下载

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery hScrollPane水平滚动条美化插件商品图片横行展示
分类:图片代码 > 图片插件 难易:入门级
查看演示 下载资源: 10

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<div class="imgshow">
	
	<div class="imgzoom">
		<img src="images/1.jpg" alt="" />
		<div class="loading"></div>
	</div>
	
	<div class="container thumblist">
		<ul>
			<li>
				<div class="current"><a href="images/1.jpg"><img src="images/s1.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p>
			</li>
			<li>
				<div><a href="images/2.jpg"><img src="images/s2.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 表单美化 input文本框模拟select选择框获取选定的value值</a></p>
			</li>
			<li>
				<div><a href="images/3.jpg"><img src="images/s3.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p>
			</li>
			<li>
				<div><a href="images/4.jpg"><img src="images/s4.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery smartFloat插件制作仿淘宝产品列表页默认排序搜索框</a></p>
			</li>
			<li>
				<div><a href="images/5.jpg"><img src="images/s5.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></p>
			</li>
			<li>
				<div><a href="images/6.jpg"><img src="images/s6.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></p>
			</li>
			<li>
				<div><a href="images/7.jpg"><img src="images/s7.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></p>
			</li>
			<li>
				<div><a href="images/8.jpg"><img src="images/s8.jpg" alt="" /></a></div>
				<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></p>
			</li>
		</ul>
	</div>
	
</div>
$(".container").hScrollPane({
	mover:"ul",
	moverW:function(){return $(".container li").length*178;}(),
	showArrow:true,
	handleCssAlter:"draghandlealter",
	mousewheel:{moveLength:207}
});

$(function(){

	var img=new Image();
	var imgshowobj=$(".imgshow");
	var imgzoom=imgshowobj.find(".imgzoom");

	imgshowobj.find(".thumblist").find("div a").live("click",function(){
		
		imgzoom.find(".loading").show();
		img.onload=function(){
			imgzoom.find("img").attr("src",img.src);
			imgzoom.find(".loading").hide();
		}
		img.src=$(this).attr("href");
		$(".thumblist li div a").parent().removeClass("current");
		$(this).parent().addClass("current");
		return false;
	});
	
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1164.html
评论2
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 椅子
    02-20 13:58
    gongamin
    我下来学习学习。
  • 头像 沙发
    02-20 09:30
    a1015703929
    还行 收下了
1 2