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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
深入解析神经网络从原理到实现
2019/07/26 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python网络编程之五子棋游戏
2020/05/14 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
合作与交流自我评价
2015/03/09 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
会议主持人开场白台词
2015/05/28 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS