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移动端广告平台是国内首家具有手机广告优化的管理平台。该平台将整合国内外主流移动广告平台，并对广告功能进行统一管理、动态配置，广告主和开发者均可以经过简单的操做轻松实现对多家广告平台的搭配使用.