特效描述：jquery 响应式布局 图片滚动 手机端触屏滚动，jquery书架式图片展示特效，如图
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/sti_style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/mediaelementplayer.css">
2. 引入JS
<script src="js/jquery-1.7.min.js"></script> <script src="js/jquery.touchSwipe.min.js"></script> <script src="js/jquery.versatileTouchSlider.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script>
3. HTML代码
<div class="sti_container" id="ex_shelf_full" style="margin-top:50px;">
<div class="sti_slider">
<div class="sti_items">
<!-- SLIDE GROUP 1 -->
<div class="sti_slide">
<div class="sti_shelf_divider"></div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h1.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Lamborghini Aventador"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h2.jpg" class="link video sti_lightbox" data-type="video-youtube" data-size="700x420" title="Youtube Video (For The Birds / PIXAR)"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h3.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a>
<a href="#" class="ribbon ribbon_red" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h4.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h5.jpg" class="link video sti_lightbox" data-type="video" data-size="540x303" title="MP4 Video. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_orange" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/h1.jpg" class="link zoom sti_lightbox" data-type="image" title="Lightbox image example"></a>
<a href="#" class="ribbon ribbon_blue" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="http://www.kaiwo123.com/ad/v1.jpg" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example 2. HTML5 Support / Flash Fallback"></a>
</div>
<div class="sti_shelf_divider_bottom"></div>
</div>
<!-- SLIDE GROUP 2 -->
<div class="sti_slide">
<div class="sti_shelf_divider"></div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="content/audio/AirReview-Landmarks-02-ChasingCorporate.mp3" class="link audio sti_lightbox" data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a>
<a href="#" class="ribbon ribbon_green" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150">
<a href="http://vimeo.com/53327926" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150">
<a href="content/html/html_content.html" class="link content sti_lightbox" data-type="html-content" data-size="550x450" title="HTML Content"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
<a href="#" class="ribbon ribbon_red" title="Ribbon"></a>
</div>
<div class="sti_prod">
<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150">
<a href="#" class="link more" title="Title"></a>
</div>
<div class="sti_shelf_divider_bottom"></div>
</div>
<!-- SLIDE GROUP 3 -->
</div><!-- sti_items -->
</div><!-- sti_slider -->
<div class="sti_paginate">
<div class="sti_page"></div>
<div class="sti_control">
<a href="#" class="sti_btn sti_play"><img src="img/play.png" alt=""></a>
<a href="#" class="sti_btn sti_pause"><img src="img/pause.png" alt=""></a>
</div>
</div>
</div><!-- sti_container -->
