利用jQuery实现多图自适应图片滚动代码



11 40 14



特效描述:利用jQuery实现 多图自适应 图片滚动代码,利用jQuery实现多图自适应图片滚动代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="http://truemag.cactusthemes.com/wp-content/themes/truemag/css/ie.css" />
<link rel='stylesheet' id='bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all' />

2. 引入JS

<script src="http://truemag.cactusthemes.com/wp-content/themes/truemag/js/html5.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.caroufredsel-6.2.1.min.js'></script>
<script type='text/javascript' src='js/template.js'></script>

3. HTML代码

<div id="slider">
	<div id="head-carousel">
		<div class="is-carousel" id="metro-carousel" data-notauto=1 data-auto_timeout=3000 data-auto_duration=800>
			<div class="carousel-content">
				<div class="video-item">
					<div class="item-thumbnail">
						<a href="#">
							<img width="748" height="421" src="image/6689741705_168a8fb882_o-748x421.jpg" sizes="(max-width: 748px) 100vw, 748px" />
							<div class="link-overlay fa fa-play"></div>
						</a>
						<div class="item-head">
							<h3><a href="#">Experience Barcelona</a></h3>
							<span><a href="#" rel="category tag">Comedy</a>, <a href="#">Slider</a></span>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/14611093215_20d9fa0fc3_h-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#" >FENDY</a></h3>
							</div>
						</div>
					</div>
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#" title="Blik">
								<img width="356" height="200" src="image/demo-photo-3-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" alt="demo-photo-3" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#"  title="Blik">Blik</a></h3>
							</div>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#" title="Blue Hybrido">
								<img width="356" height="200" src="image/4360872901_30882eba83_b-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#"  >Blue Hybrido</a></h3>
							</div>
						</div>
					</div>
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#" title="Happy Food">
								<img width="356" height="200" src="image/happy-food-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#"  title="Happy Food">Happy Food</a></h3>
							</div>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/8245632244_78ca92ed42_h-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#" >Video With ADs</a></h3>
							</div>
						</div>
					</div>
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/printemps-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" alt="Printemps" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#">Le Printemps du Cinéma 2013 (HD)</a></h3>
							</div>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="item-thumbnail">
						<a href="#">
							<img width="748" height="421" src="image/cusitrin-748x421.jpg" sizes="(max-width: 748px) 100vw, 748px" />
							<div class="link-overlay fa fa-play"></div>
						</a>
						<div class="item-head">
							<h3><a href="#" >Cusitrin</a></h3>
							<span><a href="#">Comedy</a>, <a href="#">Slider</a>, <a href="#">Vimeo</a></span>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/electroshock-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#">ELECTROSHOCK &#8211; ESMA 2011</a></h3>
							</div>
						</div>
					</div>
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#" title="G-STAR The Art of RAW">
								<img width="356" height="200" src="image/raw-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" alt="RAW" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#" >G-STAR The Art of RAW</a></h3>
							</div>
						</div>
					</div>
				</div>
				<div class="video-item">
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/5959115552_dc7171cc28_o-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#" >Alert Online</a></h3>
							</div>
						</div>
					</div>
					<div class="video-item">
						<div class="item-thumbnail">
							<a href="#">
								<img width="356" height="200" src="image/3784197708_0e2a311185_b-356x200.jpg" sizes="(max-width: 356px) 100vw, 356px" />
								<div class="link-overlay fa fa-play"></div>
							</a>
							<div class="item-head">
								<h3><a href="#" >MTV &#8220;Group Hug&#8221;</a></h3>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="carousel-button"> <a href="#" class="prev maincolor1 bordercolor1 bgcolor1hover"><i class="fa fa-chevron-left"></i></a>
				<a href="#" class="next maincolor1 bordercolor1 bgcolor1hover"><i class="fa fa-chevron-right"></i></a>
			</div>
		</div>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片滑动 图片滑块 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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