jQuery仿视频网站自适应图片滚动代码



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

193 770 257



特效描述:jQuery仿视频网站 自适应图片滚动。jQuery仿视频网站banner图片滚动,自适应屏幕大小带左右按钮控制图片滚动代码。

代码结构

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>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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