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

});

});

})