码迷,mamicode.com
首页 > 其他好文 > 详细

Html5添加支持触摸屏的响应式轮播图插件教程

时间:2016-01-07 18:18:29      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:

一、使用方法

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

 

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

 

三、初始化插件

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

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

})

 

四、配置参数

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

Html5添加支持触摸屏的响应式轮播图插件教程

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
key
加入时间:2016-01-05
  关注此人  发短消息
文章分类
key”关注的人------(0
key”的粉丝们------(0
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!