首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

jquery特效实现京东商城首页焦点图

创建时间:2014-09-23 09:35  

jquery特效实现京东商城首页焦点图
jquery特效实现京东商城首页焦点图
效果预览 立即下载
jquery京东商城首页焦点图jquery京东商城首页焦点图是一款基于jquery-powerSwitch插件制作的网站焦点图特效。jquery图片切换数字按钮淡入淡出 所属专题:焦点图代码

<script>
// 大的图片广告
// 根据图片创建id,按钮元素等,实际开发建议使用JSON数据类似
var htmlAdBtn = '';
$("#jdAdSlide img").each(function(index, image) {
var id = "adImage" + index;
htmlAdBtn = htmlAdBtn + '<a href="javascript:" class="jd_ad_btn_a" data-rel="'+ id +'">'+ (index + 1) +'</a>';
image.id = id;
});
$("#jdAdBtn").html(htmlAdBtn).find("a").powerSwitch({
eventType: "hover",
classAdd: "active",
animation: "fade",
autoTime: 5000,
onSwitch: function(image) {
if (!image.attr("src")) {
image.attr("src", image.attr("data-src"));
}
}
}).eq(0).trigger("mouseover");
 
// 便民服务
$("#servNav a").powerSwitch({
classAdd: "active",
eventType: "hover",
onSwitch: function() {
$("#pointLine").animate({ "left": $(this).position().left}, 200);
}
});
</script>
上一篇:jquery+html5自适应网站焦点图
下一篇:jquery特效带动画效果幻灯片插件

相关内容

热门推荐