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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

179 714 239



特效描述: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>



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


热门标签: 滚动导航菜单 导航切换 带标题的焦点图 缩略图 滚动切换 带缩略图的幻灯片 图片相册 带简介的焦点图 图片滚动 图片切换 图片轮播 图片墙 文字滚动 文字切换 自动滚动图片轮播 百叶窗 背景切换 图片网格 图片文字滚动 马赛克幻灯片 手风琴 图片九宫格 全屏滚动 全屏焦点图 选项卡自动切换 页面滚动 视频切换 图片高亮 列表切换 图片对比 图片文字 渐隐切换 单排图片 全屏切换 响应式图片 切换按钮 图片列表 缩放切换 滚动流动 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 flash焦点图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 手风琴 图表 焦点图幻灯片 图片 头像截图

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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