jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)

jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery

WBOY

Lepaskan： 2016-05-16 15:17:06

asal

1722 orang telah melayarinya

Artikel ini menerangkan contoh jQuery yang mensimulasikan slaid kesan penukaran skrin penyemak imbas, yang dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Klik di sini untuk melihat tunjuk cara dalam talian .

Kod khusus adalah seperti berikut:

<!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 mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/2.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/3.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/4.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/5.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_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>

Salin selepas log masuk

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa kesan khas jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.