插件地址: http://jquery.malsup.com/cycle/

<div id="propaganda">
<div id="pgdImg">
<span id="arrow1" ><img src="data:images/pgd/arrow1.png" /></span>
<span id="arrow2"><img src="data:images/pgd/arrow2.png" /></span>

<div id="ads">
<!--<div><a href="javascript:void(0)"><img src="data:images/pgd/pgd_1.png"/></a><div class="opacityBG"></div><div class="adsFont"><span>同富堂創新漢方1</span> <span><a class="moreInfo" href="javascript:void(0)">更多資料>></a></span></div></div>
<div><a href="javascript:void(0)"><img src="data:images/pgd/pgd_2.jpg"/></a><div class="opacityBG"></div><div class="adsFont"><span>同富堂創新漢方2</span> <span><a class="moreInfo" href="javascript:void(0)">更多資料>></a></span></div></div>
<div><a href="javascript:void(0)"><img src="data:images/pgd/pgd_3.jpg"/></a><div class="opacityBG"></div><div class="adsFont"><span>同富堂創新漢方3</span> <span><a class="moreInfo" href="javascript:void(0)">更多資料>></a></span></div></div>
<div><a href="javascript:void(0)"><img src="data:images/pgd/pgd_4.jpg"/></a><div class="opacityBG"></div><div class="adsFont"><span>同富堂創新漢方4</span> <span><a class="moreInfo" href="javascript:void(0)">更多資料>></a></span></div></div>
<div><a href="javascript:void(0)"><img src="data:images/pgd/pgd_5.jpg"/></a><div class="opacityBG"></div><div class="adsFont"><span>同富堂創新漢方5</span> <span><a class="moreInfo" href="javascript:void(0)">更多資料>></a></span></div></div>-->
</div>
</div>

$(function(){

$.getJSON('data/promo.json', {}, function(data){

var len=data.promo.length;
var promoStr="";
for(var i=0; i<len; i++)
{
var img=data.promo[i].imgPath;
var title=data.promo[i].title;
var linkUrl=data.promo[i].linkURL;
//promoStr+="<div><a href=\"_story/story_1.html\" target=\"_story\" onclick=\"slideDownAtIndex(1,true)\" ><img src=\""+img+"\"/></a><div class=\"opacityBG\"></div><div class=\"adsFont\"><div onclick=\"slideDownAtIndex(1,true)\">"+title+"</div> <div><a class=\"moreInfo\" href=\"_story/story_1.html\" target=\"_story\" onclick=\"slideDownAtIndex(1,true)\">更多資料>></a></div></div></div>";
promoStr+="<div><a href=\"_story/story_1.html\" target=\"_story\" onclick=\"slideDownAtIndex(1,true)\" ><img src=\""+img+"\"/></a><div class=\"opacityBG\"></div><div class=\"adsFont\"><div class=\"bTitle\" onclick=\"slideDownAtIndex(1,true)\">"+title+"</div> <div class=\"moreInfo\">更多資料>></div></div></div>";
}

$("#ads").html(promoStr);

$('#ads').cycle({
fx: 'fade',
speed: 1000,
timeout: 4000,
pause:1,
// nowrap: 1,
pager: '#pagerBar',
next: '#arrow2',
prev: '#arrow1',
//before: onAfter,
pagerAnchorBuilder: function(idx, slide) {
var num=parseInt(idx)+1;
return '<a href="#" class="NOTactiveSlide">'+num+'</a>';
},
pauseOnPagerHover:true

});

});

})

jquery cycle pugin的更多相关文章

  1. jQuery Cycle Plugin的使用

    jQuery幻灯片效果或者Slideshow效果当中如果不考虑touch效果的话,jQuery Cycle插件实在是太强大了,各种高大上的动画效果,如果想加上touch效果可以结合本blog介绍的wi ...

  2. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  3. jQuery图片切换插件jquery.cycle.js

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...

  4. jquery.cycle.js

    jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...

  5. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  6. 推荐15款创建漂亮幻灯片的 jQuery 插件

    对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...

  7. 240个jquery插件(转)

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  8. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  9. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

随机推荐

  1. 用Global.asax实现伪静态.

    在Global.asax文件里添加Application_BeginRequest事件处理.添加如下代码: 1 protected void Application_BeginRequest(Obje ...

  2. tomcat - 部署Web应用

    概述 以前,安装李刚的JavaEE里面说的方法部署应用的时候,无意中成功,但是后来每次要录视频的时候,又报错,思来想去,tomcat都重启了好多次了,配置文件也试过很多次了,还是不行.无意中发现了问题 ...

  3. uva 11529 Strange Tax Calculation (几何+计数)

    题目链接: http://vjudge.net/problem/viewProblem.action?id=18277 这题暴力n^4妥妥的TLE!即使n^3也可能会T 正确的姿势应该是:枚举每个点作 ...

  4. WebAPI接口测试之matthewcv.WebApiTestClient

    WebAPI接口测试之matthewcv.WebApiTestClient matthewcv.WebApiTestClient 1.安装matthewcv.WebApiTestClient包 打开v ...

  5. Subversion 1.7 Eclipse integration in Ubuntu12(转载)

    原文链接:http://steveliles.github.io/subversion_1_7_eclipse_integration_in_ubuntu.html Getting Subversio ...

  6. struts2中的路径问题

    <?xml version="1.0" encoding="GB18030" ?><%@ page language="java&q ...

  7. [Struts2学习笔记] -- 自定义类型转换

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. Rxjava+Retrofit2+Okhttp3多文件上传(服务器端代码+客户端代码)

    所有代码亲测可用,如有问题,欢迎指正. 首先在ApiService接口文件中新建文件上传接口 public interface ApiService { static final String BAS ...

  9. codevs 2152 滑雪

    2152 滑雪  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场 ...

  10. 令用EclipseJ2EE创建的Dynamic Web project目录结构与用MyEclipse创建的Web project一样

    Eclipse for EE 版本, 创建 Dynamic Web Project  会有俩个工程. 其中一个 是你创建的工程, 另外一个 是Servers 工程(其实也就是tomcat 的一个配置) ...