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 -->