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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
jquery each()源代码
2011/02/14 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python接口测试get请求过程详解
2020/02/28 Python
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
小学生学习雷锋倡议书
2014/05/15 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
个人思想政治总结
2015/03/05 职场文书
具结保证书范本
2015/05/11 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
个人业务学习心得体会
2016/01/25 职场文书