jquery Jingdong Mall Double 11 focus picture multi-picture advertising special effects code sharing

jquery Jingdong Mall Double 11 focus picture multi-picture advertising special effects code sharing_jquery

WBOY

Release： 2016-05-16 15:40:38

Original

1448 people have browsed it

The example in this article describes the jquery JD Mall Double 11 focus image multi-image advertising special effects. Share it with everyone for your reference. The details are as follows:
The jquery implementation of the JD Mall Double 11 focus image multi-image advertisement sliding and automatic switching animation effect source code is a piece of code that imitates the JD Mall Double 11 focus image code. It is professionally used in the image display and key display areas of the website. This code implements There are two effects: switching pictures by sliding the mouse over and automatically switching pictures.
Operation rendering: ------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The jquery Jingdong Mall Double 11 focus image multi-image advertising special effects code shared with you is as follows

<!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="http://www.jb51.net" style="color:#333"><strong>脚本之家整理</strong></a> </strong>
</div>
</body>
</html>

Copy after login

The above is the special effects code shared with you based on jquery to implement JD.com Double 11 focus image multi-image advertising. I hope you can like it and apply it in practice.