cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery Jingdong Mall Double 11 fokus gambar berbilang gambar pengiklanan kesan khas kod sharing_jquery

jquery Jingdong Mall Double 11 fokus gambar berbilang gambar pengiklanan kesan khas kod sharing_jquery

WBOY
WBOYasal
2016-05-16 15:40:381458semak imbas

Contoh dalam artikel ini menerangkan kesan khas jquery JD.com Double 11 fokus pengiklanan imej berbilang imej. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kod sumber kesan animasi berbilang gambar fokus JD Mall Double 11 dan penukaran automatik yang dilaksanakan oleh jquery ialah sekeping kod yang meniru kod gambar fokus JD Mall Double 11 Ia digunakan secara profesional dalam paparan imej dan kawasan paparan utama daripada tapak web. Kod ini melaksanakan Terdapat dua kesan: menukar gambar dengan meluncurkan tetikus ke atas dan menukar gambar secara automatik.
Penyampaian operasi: ------Lihat kesan Muat turun kod sumber---------- --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Kod kesan khas pengiklanan imej berbilang imej fokus jquery Jingdong Mall Double 11 yang dikongsi dengan anda adalah seperti berikut 

<!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>

Di atas ialah kod kesan khas yang dikongsi dengan anda berdasarkan jquery untuk melaksanakan pengiklanan berbilang imej fokus JD.com Double 11 Saya harap anda boleh menyukainya dan menerapkannya dalam amalan.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk merealisasikan kesan pintu gelangsar tab pada kemahiran webpage_javascript kiriArtikel seterusnya：js untuk merealisasikan kesan pintu gelangsar tab pada kemahiran webpage_javascript kiri

Artikel berkaitan

Lihat lagi