jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

前端技术 2023/09/06 JavaScript

本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片，分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

<!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=\"屏1\" /></li>
      <li><img src=\"img/2.jpg\" class=\"desktop_li_img\" alt=\"屏1\" /></li>
      <li><img src=\"img/3.jpg\" class=\"desktop_li_img\" alt=\"屏1\" /></li>
      <li><img src=\"img/4.jpg\" class=\"desktop_li_img\" alt=\"屏1\" /></li>
      <li><img src=\"img/5.jpg\" class=\"desktop_li_img\" alt=\"屏1\" /></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>

完整实例代码点击此处本站下载。

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15579

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案