Heim > Artikel > Web-Frontend > jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery

jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery

WBOYOriginal: 2016-05-16 15:17:061697Durchsuche

Dieser Artikel beschreibt ein Beispiel für die Simulation der 360-Grad-Browser-Bildschirmumschalteffektfolie und wird als Referenz für alle freigegeben. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Klicken Sie hier, um die Online-Demonstration anzusehen.

Der spezifische Code 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>
  <title>360效果幻灯片</title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    function changeDesktopBg(index) {
      $("#desktopList").animate({"margin-left": -(index*1000)+"px", "speed": 2000});
    }
  </script>
  <style type="text/css" >
    body { margin:0; padding: 0;}
    #desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }
    #desktop li { padding:0; float:left;}
    .desktop_li_img { width:1000px; height:600px;}
    #desktop { width:1000px; overflow:hidden; height:600px;}
    #controller ul { width:250px; list-style:none;}
    #controller li { width:40px; float:left; padding:0; text-align:center; margin-left:5px; }
    .controller_li_block { background:#F2F2F2; height:10px; line-height:10px; border:2px solid gray; cursor:pointer;}
  </style>
</head>
<body>
<center>
  <div id="desktop">
    <ul id="desktopList">
      <li><img src="img/1.jpg" class="desktop_li_img" alt="jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery" /></li>
      <li><img src="img/2.jpg" class="desktop_li_img" alt="jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery" /></li>
      <li><img src="img/3.jpg" class="desktop_li_img" alt="jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery" /></li>
      <li><img src="img/4.jpg" class="desktop_li_img" alt="jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery" /></li>
      <li><img src="img/5.jpg" class="desktop_li_img" alt="jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery" /></li>
    </ul>
  </div>
  <div id="controller">
    <ul >
      <li><div class="controller_li_block" onclick="changeDesktopBg(0)">1</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(1)">2</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(2)">3</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(3)">4</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(4)">5</div></li>
    </ul>
  </div>
</center>
</body>
</html>

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger Klassiker Spezialeffekte von jQuery"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

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：Besprechen Sie den Ausführungsprozess von JavaScript-Anweisungen_Javascript-FähigkeitenNächster Artikel：Besprechen Sie den Ausführungsprozess von JavaScript-Anweisungen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen