手机端轮播图插件

手机端轮播图实现:

 

 

 

对应插件:af.carousel.js 见附件

 

使用方法:

Js代码  

  1. /*** 
  2.  * 
  3.  * @param carouselId 
  4.  * @param carousel_dotsId 
  5.  * @param autoPlay : 是否自动播放轮播图 
  6.  * @param isCache : 不传值默认为true 
  7.  */  
  8. function carouselSetup(carouselId, carousel_dotsId, autoPlay, isCache) {  
  9.     // set size of carousel  
  10.     $(".carousel").width($(".carousel").closest(".panel").width());  
  11. //    $("#carousel").height($("#carousel").closest(".panel").height()-25);  
  12.     var moveCallback = function () {  
  13.         console.log(arguments);  
  14.     }  
  15.     var options={  
  16.         vertical:false, // page up/down  
  17.         horizontal:true, // page left/right  
  18.         pagingDiv:carousel_dotsId, // div to hold the dots for paging  
  19.         pagingCssName:"carousel_paging", //classname for the paging dots  
  20.         pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots  
  21.         wrap:true, //Creates a continuous carousel  
  22.         okToMove:true,  
  23.         pagingDotDivHeight:'10px',  
  24.         //isCache: false,  
  25.         moveCallback2/* this.carouselIndex, this.myDivHeight, this.myDivWidth, this.el.children */: moveCallback,  
  26.         autoTransitionIntervalTime:4000  
  27.     }  
  28.     if (arguments.length > 3 && !isCache) {  
  29.         options.isCache = false;  
  30.     }  
  31.     var carousel = $("#"+carouselId).carousel(options);  
  32.     if(arguments.length>2&&autoPlay){  
  33.         carousel.switchAuto();//自动播放  
  34.     }  
  35. }  

 

Js代码  

  1. carouselSetup("pic_news_carousel", "carousel_dots_picnews", false, false);  

 

 

Js代码  

  1. carouselSetup("index_carousel","carousel_dots",true);//轮播图  

 

实例:http://123.57.250.51/ios_www/www/index.html (请用手机访问)

时间: 2016-05-11

手机端轮播图插件的相关文章

BootStrap实现手机端轮播图左右滑动事件_javascript技巧

用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件.框架.但是都不能和bootstrap良好的结合. 功夫不负有心人,经过一番查找终于在github找到了一段js:toucher.js,原文链接:https://github.com/bh-lay/toucher 由于个人水平原因代码没看懂抓狂,不过使用还是没问题滴. 第一.在head中加载toucher.js. <script type="text/JavaScript" src="__PUBLIC

jQuery自适应轮播图插件Swiper用法示例_jquery

本文实例讲述了jQuery自适应轮播图插件Swiper用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 示例代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

jquery制作多功能轮播图插件_jquery

这是一款多功能幻灯片插件,支持多种配置,css样式是扒的网上的,里面的代码原创,轻喷~ ;(function($) { "use strict"; var methods = { o : { next: "#cycle-next", prev: "#cycle-prev", pager : "#cycle-nav", slider : "#beauty-slider", timeLine : "#

支持移动端和PC端的轻量级轮播图插件&amp;amp;&amp;amp;hammer.js教程

http://www.swiper.com.cn/ 下载:http://download.csdn.net/detail/cometwo/9407912 原文地址:http://www.cnblogs.com/iamlilinfeng/p/4239957.html 1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对以下事件进行监听并处理: Pans

jQuery插件slides实现无缝轮播图特效_jquery

初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 $(".slideInner").slide({ slideContainer: $('.slideInner a'), effect: 'easeOutCirc',//动画类型 autoRunTime: 5000,//自动轮播时间 slideSpeed: 1000,//速度 nav: true,//是否显示左右导航 autoRun: true,//是否自动滚动 prevBtn: $(

简单的JS轮播图代码_javascript技巧

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

蘑菇街-在一个页面中,同样的布局方式,如何调用同时调用一个定时器实现多个轮播图进行同时轮播

问题描述 在一个页面中,同样的布局方式,如何调用同时调用一个定时器实现多个轮播图进行同时轮播 请用蘑菇街里的"买手推荐"写一个同时调用一个定时器的实例,谢谢! 解决方案 http://www.cnblogs.com/wendingding/p/3763527.html 多个和一个没有什么区别. 解决方案二: 为什么我调用同一个定时器的时候,页面中只有第一个轮播可以进行轮播,其余的都不可以轮播,而且我页面中的布局都是一样的,就是图片换了一下.

轮播图-如果一个页面有多个轮播,代码重用怎么考虑?

问题描述 如果一个页面有多个轮播,代码重用怎么考虑? 如题!!用的是swiper这个插件 各路大神求解脱啊 还有弱弱问一下 是不是一个页面多个轮播图很怪?? 解决方案 把轮播的代码封装成JS组件的方式. 解决方案二: 这有什么奇怪的,很多新闻和门户网站就有很多组轮播 解决方案三: 做成类的形式,new 实例出来,不用用过程式编程,这个不好控制作用域

banner-关于jq轮播图的后台可配置

问题描述 关于jq轮播图的后台可配置 请叫各位大神,现在有这么一个功能,关于轮播图.一个页面里多次用到轮播图,大概分两种,一种是单个循环或者三四张一起循环,另一种是十张为一组,然后这样一组组的轮播.要求做成后台上传图片,然后前端的轮播图显示出来,单张倒是还好说,但是多张的怎么样实现可配置,思路是怎样的,我后台用的php 解决方案 页面生成轮播图的html代码,jquery写个插件初始化html为轮播就行了:js图片特效 解决方案二: http://blog.163.com/lgh_2002/bl