<div style="width:950px;height:705px;">
<div class="J_TWidget" data-widget-config="{&quot;circular&quot;:true,&quot;duration&quot;:0.5,&quot;easing&quot;:&quot;backBoth&quot;,&quot;activeTriggerCls&quot;:&quot;selected&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;interval&quot;:3,&quot;navCls&quot;:&quot;pan_nav&quot;,&quot;contentCls&quot;:&quot;pan_content&quot;,&quot;autoplay&quot;:true}" data-widget-type="Slide">
<div class="pan_nav" style="float:left;width:238px;height:705px;">
<div class="fl1" style="width:238px;height:156px;background:url(//gdp.alicdn.com/imgextra/i4/799193263/TB28Vx6nVXXXXcuXpXXXXXXXXXX_!!799193263.jpg);">
<div class="J_TWidget" data-widget-config="{&quot;trigger&quot;:&quot;.fl1&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.fl1&quot;,&quot;points&quot;:[&quot;tl&quot;,&quot;tl&quot;],&quot;offset&quot;:[0,0]}}" data-widget-type="Popup" style="display:none;">
<img width="238" height="156" data-pinit="registered" src="//gdp.alicdn.com/imgextra/i1/799193263/TB2wF9CnVXXXXa6XXXXXXXXXXXX_!!799193263.jpg" />
</div>
</div>
</div>
<div class="pan_content" style="width:712px;height:705px;float:left;">
<div style="width:712px;height:705px;">
<img src="//gdp.alicdn.com/imgextra/i2/799193263/TB2j_qLnVXXXXXBXXXXXXXXXXXX_!!799193263.jpg" alt="" border="0" style="display:block;" />
</div>
</div>
</div>
</div> 配置参数 参数可选值 作用说明
effect none/fade/scrolly/scrollx
(默认值:none) 切换时的动画效果
none, 最朴素的显示/隐藏效果
fade, 可实现淡隐淡现的效果
scrolly, 垂直滚动
scrollx, 水平滚动 easing easeOutStrong/easeBoth 滚动的动画方方式
countdown true/false (默认值:false) 是否开启倒计时样式
countdownFromStyle 自定义值 设定倒计时最终样式
如: width:15px 表示进度条最终宽度,可先在CSS里对样式进行定义 navCls 自定义值 对其进行轮播的目标列表的class值
contentCls 自定义值 轮播列表所对应的内容列表的class值
delay 自定义数值 (默认值:1) 延迟加载时间
.1 == 100ms triggerType mouse/click<>
(默认值:mouse) 触发方式——
mouse:鼠标经过触发
click:鼠标点击触发 hasTriggers true/false (默认值:true) 是否设置触发点
steps 自定义数值 (默认值:1) 切换视图内有多少个panels
viewSize 自定义值 切换视图区域的大小。
一般不需要设定此值,仅当获取值不正确时,用于手工指定大小 activeIndex 自定义数值 (默认值:0) 默认激活的列表项
activeTriggerCls 自定义值 (默认值:active) 默认激活列表项的class值
duration 自定义值(默认值:0.5) 动画时长
.1 = 100ms

Slide-卡盘效果的更多相关文章

  1. 京东SDK模板卡盘效果实现代码

    最近在做京东模板,因为是最新平台,好多功能都需要摸索,俺技术一般,摸索出一个简易的卡盘功能   ——————使用的是分类推荐模块哦! 本着共享的精神,俺将代码放到这儿了,各人请自便.(代码还不够完善, ...

  2. 为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  3. 自己动手丰衣足食,为Zepto添加Slide动画效果

    一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

  4. JQuery slideToggle 演示简单的 Slide Panel 效果。

    ------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...

  5. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  6. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  7. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  8. [转载]Jquery mobile 新手问题总汇

    原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  10. HTML番外整理

    经过一周的个人项目与一周的团体项目,我学到了一些有用的内容,特分享如下: 一.视频 1.对在线视频的添加 在各大网站打开一个视频,在下方的分享找到HTML代码,然后复制HTML代码到自己的代码中. 2 ...

随机推荐

  1. VC 使用OnCtlColor函数来改变控件颜色(引用)

    在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...

  2. hive中分号问题

    分号是sql的结束符,在hql中亦如此,但是hive对分号的识别没有那么智能,如下: select concat(';','aa') from lhc limit 1; FAILED: Parse E ...

  3. 9.Mybatis一级缓存和二级缓存

    所谓的缓存呢?其实原理很简单,就是在保证你查询的数据是正确的情况下,没有去查数据库,而是直接查找的内存,这样做有利于缓解数据库的压力,提高数据库的性能,Mybatis中有提供一级缓存和二级缓存. 学习 ...

  4. myBatis,Spring,SpringMVC三大框架ssm整合模板

    整合步骤 创建web工程 导入整合所需的所有jar包 编写各层需要的配置文件 1) mybatis的全局配置文件 <configuration>    <!-- 批量别名的设置 -- ...

  5. NetBios 的结构体详解

    [NetBios 的结构体详解] NetBIOS是早期的局域网传输协议. 1.结构体. 2.命令 NetBIOS命令的使用方式有两种,即等待和非等待(或称为同步与异步)方式. 如果命令码的高阶位是0时 ...

  6. Netezza SQL Analytic Functions 分析函数

    应用场景: 分组排序,分组累加求和... 基本语法: Func( value_expression) OVER ( [<partition_by_clause>] [<order_b ...

  7. Expected one result (or null) to be returned by selectOne(), but found 2

    这个问题在于你查询sql返回结果是多个值.一个集合,但是你在service的实现层的dao都调用了.get方法.而是应该使用.getlist方法等.

  8. sdk添加新的C文件编译出错

    make: *** 没有规则可以创建"test.elf"需要的目标"mike.c.o". 停止. 解决方法: 重新建立工程并且编译文件

  9. Python SQLAlchemy --3

    本文為 Python SQLAlchemy ORM 一系列教學文: 刪除 學會如何查詢之後,就能夠進行後續的刪除.更新等操作. 同樣地,以幾個範例做為學習的捷徑. 123456789 user_1 = ...

  10. 将搜狗词库.scel格式转化为.txt格式

    由于项目中要用到词库,而下载的搜狗词库是.scel格式,所以就用python脚本将搜狗词库.scel格式文件转化为.txt格式文件. #!/bin/python # -*- coding: utf-8 ...