jquery cycle pugin
插件地址: 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的更多相关文章
- jQuery Cycle Plugin的使用
jQuery幻灯片效果或者Slideshow效果当中如果不考虑touch效果的话,jQuery Cycle插件实在是太强大了,各种高大上的动画效果,如果想加上touch效果可以结合本blog介绍的wi ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- jquery.cycle.js
jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
- jquery图片切换插件jquery.cycle.js参数详解
转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...
- 推荐15款创建漂亮幻灯片的 jQuery 插件
对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...
- 240个jquery插件(转)
http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...
- jquery插件库
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
随机推荐
- 用Global.asax实现伪静态.
在Global.asax文件里添加Application_BeginRequest事件处理.添加如下代码: 1 protected void Application_BeginRequest(Obje ...
- tomcat - 部署Web应用
概述 以前,安装李刚的JavaEE里面说的方法部署应用的时候,无意中成功,但是后来每次要录视频的时候,又报错,思来想去,tomcat都重启了好多次了,配置文件也试过很多次了,还是不行.无意中发现了问题 ...
- uva 11529 Strange Tax Calculation (几何+计数)
题目链接: http://vjudge.net/problem/viewProblem.action?id=18277 这题暴力n^4妥妥的TLE!即使n^3也可能会T 正确的姿势应该是:枚举每个点作 ...
- WebAPI接口测试之matthewcv.WebApiTestClient
WebAPI接口测试之matthewcv.WebApiTestClient matthewcv.WebApiTestClient 1.安装matthewcv.WebApiTestClient包 打开v ...
- Subversion 1.7 Eclipse integration in Ubuntu12(转载)
原文链接:http://steveliles.github.io/subversion_1_7_eclipse_integration_in_ubuntu.html Getting Subversio ...
- struts2中的路径问题
<?xml version="1.0" encoding="GB18030" ?><%@ page language="java&q ...
- [Struts2学习笔记] -- 自定义类型转换
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Rxjava+Retrofit2+Okhttp3多文件上传(服务器端代码+客户端代码)
所有代码亲测可用,如有问题,欢迎指正. 首先在ApiService接口文件中新建文件上传接口 public interface ApiService { static final String BAS ...
- codevs 2152 滑雪
2152 滑雪 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场 ...
- 令用EclipseJ2EE创建的Dynamic Web project目录结构与用MyEclipse创建的Web project一样
Eclipse for EE 版本, 创建 Dynamic Web Project 会有俩个工程. 其中一个 是你创建的工程, 另外一个 是Servers 工程(其实也就是tomcat 的一个配置) ...