码迷,mamicode.com
首页 > Web开发 > 详细

jquery cycle pugin

时间:2016-05-16 10:48:18      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

<div id="ads">
<!--<div><a href="javascript:void(0)"><img src="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="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="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="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="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

标签:

原文地址:http://www.cnblogs.com/facial/p/5497008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!