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


Posted in Javascript onJanuary 29, 2016

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

运行效果截图如下:

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

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

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
vue的webcamjs集成方式
Nov 16 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
You might like
php生成EXCEL的东东
2006/10/09 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python机器学习之贝叶斯分类
2018/03/26 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python SVD压缩图像的实现代码
2019/11/05 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
java关于string最常出现的面试题整理
2021/01/18 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
财务与信息服务专业推荐信
2013/11/28 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
2015年中秋寄语
2015/07/31 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
区域销售大会开幕词
2016/03/04 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers