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


Posted in Javascript onSeptember 06, 2015

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

jquery京东商城双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://3water.com" style="color:#333"><strong>三水点靠木整理</strong></a> </strong>
</div>
</body>
</html>

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

Javascript 相关文章推荐
关于JS管理作用域的问题
Apr 10 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
js严格模式总结(分享)
Aug 22 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 #Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 #Javascript
基于jquery实现的树形菜单效果代码
Sep 06 #Javascript
jQuery.extend 函数及用法详细
Sep 06 #Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 #Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python栈类实例分析
2015/06/15 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Selenium定位元素操作示例
2018/08/10 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python字典的遍历3种方法详解
2019/08/10 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
PHP数据运算类型都有哪些
2013/11/05 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年质检工作总结
2014/11/26 职场文书
意向协议书
2015/01/27 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫