编程 Javascript

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

Posted in Javascript onJanuary 29, 2016

本文实例讲述了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模拟360浏览器切屏效果幻灯片(附demo源码下载)

- Author -

m1870164

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

理解Javascript_11_constructor实现原理

Oct 18 Javascript

document.getElementBy("id")与$("#id")有什么区别

Sep 22 Javascript

JS获得浏览器版本和操作系统版本的例子

May 13 Javascript

跟我学习JScript的Bug与内存管理

Nov 18 Javascript

AngularJS 过滤与排序详解及实例代码

Sep 14 Javascript

微信小程序 Video API实例详解

Oct 02 Javascript

AngularJs表单验证实例代码解析

Nov 29 Javascript

微信公众平台开发教程（四）实例入门：机器人回复(附源码)

Dec 02 Javascript

老生常谈js数据类型

Aug 03 Javascript

Bootbox将后台JSON数据填充Form表单的实例代码

Sep 10 Javascript

JS深入学习之数组对象排序操作示例

May 01 Javascript

微信小程序抽奖组件的使用步骤

Jan 11 Javascript

js实现滚动条滚动到某个位置便自动定位某个tr

Jan 20 #Javascript

JavaScript中的this,call,apply使用及区别详解

Jan 29 #Javascript

javascript实现tab响应式切换特效

Jan 29 #Javascript

JavaScript SweetAlert插件实现超酷消息警告框

Jan 28 #Javascript

JS组件系列之Bootstrap Icon图标选择组件

Jan 28 #Javascript

很不错的两款Bootstrap Icon图标选择组件

Jan 28 #Javascript

Angular实现form自动布局

Jan 28 #Javascript