`

手机端轮播图插件

阅读更多

手机端轮播图实现:

 

 

 

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

 

使用方法:

/***
 *
 * @param carouselId
 * @param carousel_dotsId
 * @param autoPlay : 是否自动播放轮播图
 * @param isCache : 不传值默认为true
 */
function carouselSetup(carouselId, carousel_dotsId, autoPlay, isCache) {
    // set size of carousel
    $(".carousel").width($(".carousel").closest(".panel").width());
//    $("#carousel").height($("#carousel").closest(".panel").height()-25);
    var moveCallback = function () {
        console.log(arguments);
    }
    var options={
        vertical:false, // page up/down
        horizontal:true, // page left/right
        pagingDiv:carousel_dotsId, // div to hold the dots for paging
        pagingCssName:"carousel_paging", //classname for the paging dots
        pagingCssNameSelected: "carousel_paging_selected", //classname for the selected page dots
        wrap:true, //Creates a continuous carousel
        okToMove:true,
        pagingDotDivHeight:'10px',
        //isCache: false,
        moveCallback2/* this.carouselIndex, this.myDivHeight, this.myDivWidth, this.el.children */: moveCallback,
        autoTransitionIntervalTime:4000
    }
    if (arguments.length > 3 && !isCache) {
        options.isCache = false;
    }
    var carousel = $("#"+carouselId).carousel(options);
    if(arguments.length>2&&autoPlay){
        carousel.switchAuto();//自动播放
    }
}

 

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

 

 

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

 

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



 

 

 

  • 大小: 1.1 MB
  • 大小: 946.7 KB
  • 大小: 70 KB
  • 大小: 20 KB
0
1
分享到:
评论

相关推荐

    支持响应式手机端jQuery图片轮播插件unslider.rar

    支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式手机端jQuery图片轮播插件unslider.rar 支持响应式...

    jQuery响应式手机端触屏滑动图片轮播插件

    **jQuery响应式手机端触屏滑动图片轮播插件** 在现代网页设计中,图片轮播已经成为一种常见的展示方式,特别是在手机端,它能够高效地利用有限的屏幕空间来展示多张图片或内容。jQuery作为一款轻量级的JavaScript库...

    手机移动端轮播图切换js插件

    本文将详细介绍一款专为手机移动端设计的高效、易用的轮播图切换JavaScript插件,该插件支持多图轮播和无缝切换功能。 一、轮播图基本原理 轮播图,也被称为滑动展示或旋转木马,是通过在一定时间内自动改变显示的...

    支持响应式手机端jQuery图片轮播插件unslider.zip

    支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端 、支持函数回调、支持左右按钮切换,可以自定义是否使用响应式fluid:true/false、是否显示 圆点切换dots:true/false,是否...

    个人jquey轮播插件

    在IT领域,jQuery轮播插件是网页设计中不可或缺的一部分,尤其在响应式网页设计中,它们被广泛用于实现图片、内容或广告的自动滚动效果。"个人jQuery轮播插件"很可能是一个由个人开发者创建的,专为手机和自适应布局...

    html5 div图片放大插件手机端图片放大预览效果

    html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果

    适合手机端的轮播图,同界面可多次调用

    2. **触摸滑动支持**:手机端的交互主要依赖于触摸操作,因此一个好的轮播图插件需要支持触摸滑动,让用户能轻松地浏览内容。 3. **良好的兼容性**:考虑到市面上Android和iOS等不同操作系统及多种浏览器的存在,...

    电脑端手机端滑动轮播图

    在网页设计中,滑动轮播图是一种常见的展示方式,尤其在电脑端和手机端的交互体验中扮演着重要角色。这种元素能够有效地利用有限的空间展示多张图片或信息,吸引用户的注意力,提升网站的用户体验。本文将深入探讨...

    支持响应式手机端jQuery图片轮播插件unslider

    支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端、支持函数回调、支持左右按钮切换,可以自定义是否使用响应式fluid:true/false、是否显示圆点切换dots:true/false,是否支持...

    手机端轮播图(焦点图)和hammer.js教程

    手机端轮播图,也被称为焦点图,是移动设备上常用的一种展示多张图片或内容的交互式设计。它能够高效地利用有限的屏幕空间,为用户呈现丰富的信息。在移动应用和网页设计中,轮播图是提高用户体验、吸引用户注意力的...

    兼容电脑手机端23547的js图片画廊插件.zip

    《电脑手机端兼容的JS图片画廊插件详解》 在现代网页设计中,图片画廊是不可或缺的一部分,它能够帮助用户以优雅的方式浏览和管理大量图片。本篇将深入探讨一个特别针对电脑和手机端优化的JS图片画廊插件,这个插件...

    jQuery支持手机端图片列表轮播滚动代码

    "jQuery支持手机端图片列表轮播滚动代码"是一个专为移动端设计的jQuery插件,它旨在帮助开发者轻松实现图片轮播效果,使得用户可以在有限的屏幕空间内浏览多张图片。这个插件充分利用了jQuery的强大功能,结合手机...

    jQuery轮播图插件slider-pro

    **jQuery轮播图插件slider-pro详解** slider-pro是一款强大且灵活的jQuery插件,专为构建高质量的响应式轮播图而设计。它具备模块化的结构,这意味着开发者可以根据需要选择不同的组件,轻松定制出满足特定需求的...

    jQuery响应式手机端触屏滑动图片轮播插件.zip

    **jQuery响应式手机端触屏滑动图片轮播插件** 在移动互联网时代,网站的用户体验至关重要,特别是在手机端,用户对于视觉展示和交互性的需求日益增强。jQuery作为一个轻量级、高性能的JavaScript库,提供了丰富的...

    jQuery手机端HTML5带农历日期选择插件jQuery移动端日历插件swiper.js

    images目录可能存储了插件所需的图片资源,如图标或者背景图;js目录则包含了JavaScript源代码,包括jQuery、swiper.js以及自定义的日历插件逻辑。 总的来说,这款jQuery手机端HTML5日历插件充分利用了现有的前端...

    移动端的纯js轮播图插件

    随着智能手机和平板电脑的普及,对响应式和交互性强的网页内容需求日益增加,轮播图作为展示多张图片或信息的有效方式,自然成为了开发者们的重要工具。这款名为`slider`的js插件,以其轻量级、灵活性和易用性...

    iSlider手机端图片滑动切换.zip

    "iSlider"作为一款专为手机端设计的图片滑动切换工具,凭借其无插件依赖、高度自适应和强大的功能特性,深受开发者们的喜爱。本文将详细介绍iSlider的核心特点、工作原理以及如何在项目中应用。 首先,我们来理解...

    HTML5实现手机客户端轮播图欢迎页面

    一个简单的HTML5页面,使用fullPage.js插件做的轮播图页面,可以直接放在Android项目中的 assets 文件夹下作为app欢迎页面来使用,结构简单,替换图片就可以放入你的项目中 另外,没有积分的同学 到...

Global site tag (gtag.js) - Google Analytics