Html5添加支持觸摸屏的響應式輪播圖插件教程

1、使用方法

<link rel="stylesheet" href="css/sangarSlider.css" type="text/css">

<link rel="stylesheet" href="css/sangar-skin-default.css" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery-migrate.min.js"></script>

<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

<script type="text/javascript" src="js/imagesloaded.min.js"></script>

<script type="text/javascript" src="js/jquery.sangarSlider.js"></script>

 

2、Html結構

<div class='sangar-slideshow-container' id='sangar-example'>

<div class='sangar-content-wrapper' style='display:none;'>

<div class='sangar-content'>

<img src='images/slide-1.jpg' />

<a href='http://www.htmleaf.com' target="_blank"></a>

</div>

<div class='sangar-content'>

<img src='images/slide-2.jpg' />

<a href='http://www.htmleaf.com'></a>

</div>

<div class='sangar-content'>

<img src='images/slide-3.jpg' />

</div>

<div class='sangar-content'>

<img src='images/slide-4.jpg' />

</div>

<div class='sangar-content'>

<img src='images/slide-5.jpg' />

        </div>

    </div>

</div>  

 

3、初始化插件

jQuery(document).ready(function($) {

$('#sangar-example').sangarSlider();

})

 

4、配置參數

animation : 'horizontal-slide',

animationSpeed : 600,

continousSliding : true,

showAllSlide : false,

timer :  false,

advanceSpeed : 3000,

pauseOnHover : true,

startClockOnMouseOut : true,

startClockOnMouseOutAfter : 800,

directionalNav : 'autohide',

directionalNavShowOpacity : '0.9'

directionalNavHideOpacity : '0.1',

directionalNavNextClass : 'exNext',

directionalNavPrevClass : 'exPrev',

pagination : 'bullet',

paginationContent : ["Lorem Ipsum", "Dolor Sit", "Consectetur", "Do Eiusmod", "Magna Aliqua"],

paginationContentType : 'text',

paginationContentWidth : 120,

paginationImageHeight : 90,

paginationContentFullWidth : false,

paginationExternalClass : 'exPagination',

skinClass : 'sangar-skin-default',

width : 650,

height : 400,

scaleSlide : false,

scaleImage : true,

fixedHeight : true,

background: "#222222",

imageVerticalAlign : 'middle',

jsOnly : false      

      

             

KeyMob移動端廣告平臺是國內首傢俱有手機廣告優化的管理平臺。該平臺將整合國內外主流移動廣告平臺，並對廣告功能進行統一管理、動態配置，廣告主和開發者均可以經過簡單的操做輕鬆實現對多家廣告平臺的搭配使用.