js水平滚动条九宫格图片轮播滚动



103 408 137



特效描述:js水平滚动条 九宫格 图片轮播滚动,js水平滚动条九宫格图片轮播滚动

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="../mootools九宫格图片轮播/css/gallery-slider.css" />

2. 引入JS

<script type="text/javascript" src="../mootools九宫格图片轮播/js/mootools.js"></script>
<script type="text/javascript" src="../mootools九宫格图片轮播/js/duotive-slider-gallery.js"></script>

3. HTML代码

<div id="slideshow-wrapper">
	<div id="slideshow-pattern" class="subheader-pattern-dot"></div>
	<div id="slideshow-border-top">
		<div id="gallery-slider-wrapper">
			<div id="gallery-slider">
				<div id="slider-controls">
					<a href="javascript: void(0)" id="slider-control-left">left</a>
					<a href="javascript: void(0)" id="slider-control-right">right</a>
				</div>
				<div id="slider-images-wrapper">
					<ul id="slider-main-ul">
						<li>
							<ul>
								<li class="type-3">
									<a class="image-icon" title="杨璇璇-欧美电影" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>杨璇璇-欧美电影</strong>知天使介绍:杨璇璇生于 1990-04-12  武汉  星座 白羊座
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/001.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="image-icon"  title="吴悠-篮球" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>吴悠-篮球</strong>知天使介绍:吴悠生于 1985-08-26 北京  星座 处女座 
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/002.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="video-icon"  title="高齐-凤凰网" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>高齐-凤凰网</strong>
											知天使介绍:高齐生于	1979-11-22 北京 星座	天蝎座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/003.jpg"  alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-1">
									<a class="image-icon"  title="【北京报摘】一通道常年积水 五部门未认领" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【北京报摘】一通道常年积水 五部门未认领</strong>记者以居民身份联系多家单位,截至发稿,无一单位承诺负责此事。
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/004.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="image-icon" title="【科技】智能手表为何看着容易做着难?" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【科技】智能手表为何看着容易做着难?</strong>
											遗憾的至今未能有任何一家厂商的一款智能手表在市场中获得成功,几乎均是腰斩。
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/005.jpg" alt="">
									</a>
								</li>
								<li class="type-2">
									<a class="image-icon"  title="晏天际-电影预告片" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>晏天际-电影预告片</strong>知天使介绍:晏天际生于	1988-06-22  天津  星座	巨蟹座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/006.jpg"  alt="">	
									</a>
								</li>
								<li class="type-2">
									<a class="article-icon" title="吴鑫桐-美剧 " href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>吴鑫桐-美剧 </strong>
											知天使介绍: 吴鑫桐生于 1989-03-27 沈阳  星座 白羊座 
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/007.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-2">
									<a class="image-icon" title="【时尚】英国面包师把宝宝捏出来了" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【时尚】英国面包师把宝宝捏出来了</strong>太厉害,英国面包师捏出来的艺术品
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/008.jpg" alt="">
									</a>
								</li>
								<li class="type-3">
									<a class="image-icon"  title="【时尚】春日复古装逆袭 变身清新小资女" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【时尚】春日复古装逆袭 变身清新小资女</strong>
											复古风格的流行这几年越来越热,复古装已经不是淑女的专利,OL装,非主流复古装扮中都少不了复古装的元素,你的衣橱里还没有复古装?那就快跟小编来吧!
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/009.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-3">
									<a class="article-icon" title="【你懂的】沃兹拍性感内衣广告" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【你懂的】沃兹拍性感内衣广告</strong>沃兹拍性感内衣广告 横卧躺椅极致诱惑
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/010.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="【选秀】特效化妆师大对决 第四季 01" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【选秀】特效化妆师大对决 第四季 01</strong>《特效化妆师大对决第四季》讲述了Syfy真人秀节目《Face off》
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/011.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="潘霜霜-小品" href=" http://www.51qianduan.com/" >
										<span>
											<div class="icon"></div>
											<strong>潘霜霜-小品</strong>知天使介绍:潘霜生于 1987-04-03 杭州  星座 白羊座 
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/012.jpg"  alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-1">
									<a class="image-icon" title="陈思阳-幼儿教育" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>陈思阳-幼儿教育</strong>
											<em class="more">知天使介绍:陈思阳生于	2008-12-18  星座	射手座</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/013.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="【食谱】剁椒鱼头" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【食谱】剁椒鱼头</strong>原料:鱼头1(约2斤)  香葱4根  葱3片  姜3片
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/014.jpg" alt="">
									</a>
								</li>
								<li class="type-2">
									<a class="article-icon" title="付琦-北京报摘" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>付琦-北京报摘</strong>知天使介绍:付琦生于	1986-05-30  北京 星座  双子座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/015.jpg" alt="">
									</a>
								</li>
								<li class="type-2">
									<a class="image-icon"  title="【汽车】宝马2系Gran Coupe" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【汽车】宝马2系Gran Coupe</strong>
											继宝马2系敞篷版车型的谍照曝光之后(点击查看详情),日前,我们又在网络上发现了一张宝马2系Gran Coupe车型的宣传图。据最新消息,该车有望于2014年正式发布。
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/016.jpg"alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-2">
									<a class="image-icon"  title="王白石-笑口常开" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>王白石-笑口常开</strong>知天使介绍:王白石生于	1985-12-20  吉林   星座	射手座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/017.jpg" alt="">
									</a>
								</li>
								<li class="type-3">
									<a class="article-icon" title="【摄影】室内私房照 零起点美资大揭秘" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【摄影】室内私房照 零起点美资大揭秘</strong>这个秋末冬初的季节正是室内私房人像的升温季节。还在担心女友的姿势呆板吗?四大经典私房照摆姿,绝对给你一个不一样的女朋友。今天给大家介绍一下室内私房照美资要领!
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/018.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-3">
									<a class="video-icon"  title="潘霜霜-笑口常开" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>潘霜霜-笑口常开</strong>知天使介绍:潘霜霜生于 1987-04-03  杭州  星座  白羊座
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/019.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="王婧-汽车" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>王婧-汽车</strong>知天使介绍:王婧生于 1985-06-05 北京  星座  双子座		
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/020.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="杨璇璇-欧美电影" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>杨璇璇-欧美电影</strong>知天使介绍:杨璇璇生于	1990-04-12  武汉  星座	白羊座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/021.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-1">
									<a class="article-icon" title="王伟宁-新锐" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>王伟宁-新锐</strong>知天使介绍:王伟宁生于	1989-01-17  北京  星座	摩羯座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/022.jpg" alt="">
									</a>
								</li>
								<li class="type-1">
									<a class="article-icon" title="【佛学】努力使自己成为一颗珍珠" href="http://www.51qianduan.com/" >
										<span>
											<div class="icon"></div>
											<strong>【佛学】努力使自己成为一颗珍珠</strong>有的时候,你必须知道自己是普通的沙粒,而不是价值连城的珍珠。
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="158" src="../mootools九宫格图片轮播/images/023.jpg" alt="">
									</a>
								</li>
								<li class="type-2">
									<a class="video-icon"  title="陈晓晨-爆笑" href="http://www.51qianduan.com/" >
										<span>
											<div class="icon"></div>
											<strong>陈晓晨-爆笑</strong>知天使介绍:陈晓晨生于	1986-09-07  北京  星座	处女座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/024.jpg" alt="">
									</a>
								</li>
								<li class="type-2">
									<a class="image-icon"  title="【专题】知天使独家探秘-恶魔少女龙思雨" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>【专题】知天使独家探秘-恶魔少女龙思雨</strong>TA是众人口中的龙少,TA是你费劲心思也不得而知的一个谜,TA是不畏众人不惑的恶魔之女,龙思雨
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/025.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li class="type-2">
									<a class="image-icon"  title="郭勇-企业家" href="http://www.51qianduan.com/">
										<span>
											<div class="icon"></div>
											<strong>郭勇-企业家</strong>知天使介绍:郭勇生于1977-07-08 青岛  星座:巨蟹座
											<em class="more">详情 »</em>
										</span>
										<img height="148" width="318" src="../mootools九宫格图片轮播/images/026.jpg" alt="">
									</a>
								</li>
								<li class="type-3">
									<a class="article-icon" title="【你懂的】英超宝贝乔丹化身神兽" href="http://www.51qianduan.com/" >
										<span>
											<div class="icon"></div>
											<strong>【你懂的】英超宝贝乔丹化身神兽</strong>年3月27日讯,伦敦,当地时间3月26日,著名英超宝贝乔丹(Katie Price poses )为个人时装品牌KP Equestrian五周年庆祝,扮粉红妖冶神兽搔首弄姿。
											<em class="more">详情 »</em>
										</span>
										<img height="298" width="318" src="../mootools九宫格图片轮播/images/027.jpg" alt="">
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div id="slider-bottom-controls">
					<a id="slider-scroll-left" href="javascript: void(0);" title="Scroll left">left</a>
					<div id="slider-scroll">
						<div class="knob"></div>
					</div>
					<a id="slider-scroll-right" href="javascript: void(0);" title="Scroll right">right</a>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var dtSlideshow = new dtSliderGallery({
	container:$("gallery-slider"),
	arrowControls:1,
	description:1,
	transitionDuration:1000,
	transitionInterval:5000
});
</script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 二维码 头像上传 图片上传 图片全屏 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片叠加 图片层叠 图片放大镜 图片拖动 图片拖拽 图片广告 地图 中国地图 世界地图 带缩略图的幻灯片 h5图片动画 h5图标动画 html5图片动画 html5图标动画 flash焦点图 flash幻灯片 flashbanner flash图片轮播 滚动切换 滚动条切换 滑动选项卡 滑动切换 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片滑动 图片滑块 图片收缩展开 图片收缩 图片展开 图片切换 图片选项卡 图标选项卡 图片滚动 图片滚动条 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 纯图片轮播 图片轮播 图标导航 图标菜单 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 图表 焦点图 幻灯片 轮播图 bar焦点图 图片 图片插件 头像截图 带简介的焦点图 图片滚动 图片滚动条 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 图片九宫格 图片滚动 滚动图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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