本文实例讲述了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 href="https://www.jb51.net/css/common.css" /> <link href="https://www.jb51.net/css/jd.css" /> <style> .zxx_body .zxx_constr {width: 1210px;} </style> </head> <body> <div> <div> <!-- body of jd.html --> <div> <div> <img src="https://www.jb51.net/images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg"> <img data-src="images/rBEhVlJ4ugUIAAAAAADNu0WERsYAAFE9ABekBAAAM3T074.jpg"> <img data-src="images/rBEhUlJzCqoIAAAAAAE7yTNr8uEAAE2ggLjA1QAATvh176.jpg"> <img data-src="images/rBEhVVJ40jMIAAAAAAEESo4hULIAAFFRgKzU_IAAQRi366.jpg"> <img data-src="https://www.jb51.net/images/rBEhVlJ5oCUIAAAAAAE4O585pSAAAFGKgINDgcAAThT749.jpg"> <img data-src="images/rBEhVlJ5mUEIAAAAAAFZ8YVO0RYAAFGEwKl9xAAAVoJ892.jpg"> <img data-src="images/rBEhVlJ5sGsIAAAAAAEw4mmfc50AAFGdwOMkwIAATD6787.jpg"> <div></div><!-- add active --> </div> </div> </div> </div> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/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:" 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> </div> <div> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> <a href="https://www.jb51.net"><strong>脚本之家整理</strong></a> </strong> </div> </body> </html>
以上就是为大家分享的基于jquery实现京东商城双11焦点图多图广告特效代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章: