suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Vollbild-Fokusbild, scrollen nach links und rechts, Spezialeffektcode, Sharing_jquery

jQuery-Vollbild-Fokusbild, scrollen nach links und rechts, Spezialeffektcode, Sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:40:171036Durchsuche

Das Beispiel in diesem Artikel beschreibt den jQuery-Spezialeffekt „Horizontales Löschen von Fokusbildern“. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Die jQuery-Fokuskarte ist ein Vollbild-Fokuskartencode, der nach links und rechts scrollt, über linke und rechte Schaltflächen verfügt, über Miniaturansichten verfügt und automatisches Karussell unterstützt.
Vorgangsrendering: -------------------Effekt anzeigen Quellcode herunterladen--------- - --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der für Sie freigegebene jQuery-Vollbild-Fokusbild-Spezialeffektcode für das Links- und Rechtsscrollen lautet wie folgt 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>住趣家居网满屏jQuery焦点图</title>
<link href="css/home.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/home.js" type="text/javascript"></script>
</head>
<body>
<div class="zq_homeView" id="jobs_home_homeView">
 <div class="zq_pictureBox" node-type="pictureBox">
  <div class="zq_pictures" node-type="pictures">
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="jQuery-Vollbild-Fokusbild, scrollen nach links und rechts, Spezialeffektcode, Sharing_jquery" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.jb51.net/jiaoben/" target="_blank"><img alt="jQuery-Vollbild-Fokusbild, scrollen nach links und rechts, Spezialeffektcode, Sharing_jquery" src="images/1.jpg" /></a>
  </div>
  <div class='zq_mask zq_maskLeft' node-type="maskLeft"></div>
  <div class='zq_mask zq_maskRight' node-type="maskRight"></div>
 </div>
 <div class="zq_imgBox">
  <div class="zq_imgs clearfix">
   <a node-type="smallPic" target="_blank" data-index="1" href="http://www.jb51.net/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="2" href="http://www.jb51.net/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="3" href="http://www.jb51.net/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="4" href="http://www.jb51.net/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="5" href="http://www.jb51.net/jiaoben/"><img alt="jQuery-Vollbild-Fokusbild, scrollen nach links und rechts, Spezialeffektcode, Sharing_jquery" src="images/5.jpg" /></a>
  </div>
  <div class="zq_slides">
   <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a>
   <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a>
  </div>
 </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

Das Obige ist der mit Ihnen geteilte jQuery-Vollbild-Fokusbild-Spezialeffektcode, der Ihnen gefällt und Sie ihn in der Praxis anwenden können.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery realisiert den Schiebetürmenüeffekt der Titelschriftart change_jqueryNächster Artikel：jquery realisiert den Schiebetürmenüeffekt der Titelschriftart change_jquery

In Verbindung stehende Artikel

Mehr sehen