jQuery水平滚动条商品展示代码



106 421 141



特效描述:jQuery 水平滚动条 商品展示代码,jQuery水平滚动条商品展示代码

代码结构

1. 引入JS

<script type="text/javascript" src="../jquery水平滚动条美化/jquery水平滚动条美化/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery水平滚动条美化/jquery水平滚动条美化/js/Dragslide.js"></script>

2. HTML代码

	<div id="bookslide">
		<div id="bookslide-main">
			<ul>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本"><img  alt="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small939eec7e10f99c541febcef39202b308.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本">jquery 信息提示框 鼠标滑过导航文本内容显示提示详细信息文本</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效"><img  alt="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small3a1184db401138d6443a1b5f42cb289b.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 图片特效 鼠标滑过图片显示文字与标题内容特效">jquery 图片特效 鼠标滑过图片显示文字与标题内容特效</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列"><img  alt="jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small18129a189a8f547aba10fb10f91e6282.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列">jquery 幻灯片插件 canvas 3D旋转木马 图片立体展示 图片有大到小一次顺序排列</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 导航 鼠标滑过类似气泡放大缩小显示二级菜单"><img  alt="jquery 导航 鼠标滑过类似气泡放大缩小显示二级菜单" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/smalldea4b17bf6f50d0481801c41cc6eae4b.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 导航 鼠标滑过类似气泡放大缩小显示二级菜单">jquery 导航 鼠标滑过类似气泡放大缩小显示二级菜单</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条"><img  alt="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small9d03c58136f0f413d4f619536213bddb.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条">jquery JScrollPane 插件设置浏览器默认垂直滚动条和内置滚动条</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作"><img  alt="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small60e10976234830bb2f715dc2b6438479.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img  alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small99c04eb3c2092522c82fda8a5e9245b5.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换"><img  alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small2c73b60f596df9f398871518dcc496f3.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox"><img  alt="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/smallee9241175b1e38b5df271a9f2f67034d.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单"><img  alt="用div+css制作一个CSS3的简约图标导航菜单" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/smallc5d3ea1b5b05a76711a797134d65dbfd.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></p>
				</li>
				<li>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果"><img  alt="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" src="../jquery水平滚动条美化/jquery水平滚动条美化/images/small8937f779ac932d157fe04fe463b083d4.jpg" /></a>
					<p><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></p>
				</li>
			</ul>
		</div>
		<div id="bscrollbar">
			<div id="bscrollbar-pre"></div>
			<div id="bscrollbar-m"><div id="bscrollbar-handel"></div></div>
			<div id="bscrollbar-next"></div>
		</div>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 自动滚动图片轮播 图片滚动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到