jquery京东商城双11焦点图多图广告特效代码分享

更新时间：2015年09月06日 13:36:17 投稿：lijiao

这篇文章主要介绍了jquery京东商城双11焦点图多图广告特效，一个精致的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。

本文实例讲述了jquery京东商城双11焦点图多图广告特效。分享给大家供大家参考。具体如下：
jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码，是一段模仿京东商城双11的焦点图代码，专业应用于网站的图片展示及重点展示的区域，该段代码实现了鼠标滑过切换图片及自动切换图片两种效果.
运行效果图： -------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery京东商城双11焦点图多图广告特效代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<title>jquery京东商城双11焦点图多图广告代码</title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/jd.css" />
<style>
.zxx_body .zxx_constr {width: 1210px;}
</style>
</head>

<body>

<div class="zxx_body">
 <div class="zxx_constr">
  <!-- body of jd.html -->
  <div class="jd_body">
   <div id="jdAdSlide" class="jd_ad_slide">
    <img src="images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg" class="jd_ad_img">
    <img data-src="images/rBEhVlJ4ugUIAAAAAADNu0WERsYAAFE9ABekBAAAM3T074.jpg" class="jd_ad_img">
    <img data-src="images/rBEhUlJzCqoIAAAAAAE7yTNr8uEAAE2ggLjA1QAATvh176.jpg" class="jd_ad_img">
    <img data-src="images/rBEhVVJ40jMIAAAAAAEESo4hULIAAFFRgKzU_IAAQRi366.jpg" class="jd_ad_img">
    <img data-src="images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg" class="jd_ad_img">
    <img data-src="images/rBEhVlJ5mUEIAAAAAAFZ8YVO0RYAAFGEwKl9xAAAVoJ892.jpg" class="jd_ad_img">
    <img data-src="images/rBEhVlJ5sGsIAAAAAAEw4mmfc50AAFGdwOMkwIAATD6787.jpg" class="jd_ad_img">
    <div id="jdAdBtn" class="jd_ad_btn"></div><!-- add active -->
   </div>
  </div>
 </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-powerSwitch.js"></script>
<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>
 
 <div style="width:960px;margin:10px auto; clear:both; text-align:center; ">

</div>
<div style="width:960px;margin:20px auto 100px auto; clear:both; text-align:center; font-size:12px; line-height:25px; ">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<a href="https://www.jb51.net" style="color:#333"><strong>脚本之家整理</strong></a> </strong>
</div>
</body>
</html>

以上就是为大家分享的基于jquery实现京东商城双11焦点图多图广告特效代码，希望大家可以喜欢，并应用到实践中。

您可能感兴趣的文章:

jQuery.validate.js表单验证插件的使用代码详解
Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，这篇文章主要介绍了jQuery.validate.js表单验证插件的使用代码详解,需要的朋友可以参考下
2018-10-10
jQuery实现文件上传进度条特效
带进度条的文件上传特效，每个文件都有进度条，都有上传详情介绍。效果非常不错，这里推荐给大家。
2015-08-08
基于JQuery制作的产品广告效果
这个漂亮的产品广告效果，在购物网站也是比较常见的，或是迅雷视频网站上。
2010-12-12
servlet+jquery实现文件上传进度条示例代码
现在文件的上传，特别是大文件上传，都需要进度条。这篇文章主要介绍了servlet+jquery实现文件上传进度条示例代码，有兴趣的可以了解一下。
2017-01-01
jQuery技巧总结
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等
2011-01-01
几个比较经典常用的jQuery小技巧
现在讲一下几个比较经典，而且比较常用的 jQuery 技巧，相信你能举一反三。
2010-03-03
jQuery消息提示框插件Tipso
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了众多参数，如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等等。
2015-05-05
JQuery插件Quicksand实现超炫的动画洗牌效果
Quicksand这是一个非常不错的 jQuery 插件，用于实现动画洗牌效果，十分的实用，有需要的小伙伴可以参考下。
2015-05-05
jQuery实现本地预览上传图片功能
这篇文章主要介绍了jQuery实现本地预览上传图片功能，为大家推荐了一款图片上传预览插件，感兴趣的小伙伴们可以参考一下
2016-01-01
jquery实现聊天机器人
这篇文章主要为大家详细介绍了jquery实现聊天机器人，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02