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



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

252 1006 336



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



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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