特效描述：利用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 – 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 “Group Hug”</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>
