jquery实现图片切换代码


Posted in Javascript onOctober 13, 2016

本文实例为大家分享了jquery实现图片切换的方法,供大家参考,具体内容如下

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <title></title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script>
 $(function(){
  var num2=6;//用于设置当前选中ol li的z-index值
  $('ol li').mouseover(function(e){
   $(this).attr('class','current');
   $(this).siblings().attr('class','');
   num2++;
   var num=$(this).index();//存ol li的序列号
   $('ul li').eq(num).css('z-index',num2);
   $('ul li').eq(num).css('left','600px');//修改ul li对应的序列号的样式,先把它的位置绝对定位到div外面

   //$('ul li').eq(num).css('left','0');这句是静态css,下一句是动态css
   $('ul li').eq(num).animate({left:'0'},50);//然后把它的位置又重新绝对定位到父元素上面 这样就实现了一个动画的效果
  });

 });
 </script>
 <style>
 *{
  padding:0;margin:0;border:0;
 }
 .all{/*div的宽高设置成和五张图片的宽高一样*/
  width:600px;
  height:300px;
  margin:100px auto;/*div居中*/
  position:relative;/*相对定位,便于子元素使用绝对定位*/
  overflow:hidden;/*隐藏超出部分的图片*/
 }
 .all ul{
  position:relative;
  z-index:1;
 }
 .all ul li{
  position:absolute;
  left:0;
  top:0;
 }
 .all ol{
  position:absolute;
  z-index:2;/*显示在ul上面*/
  right:10px;
  bottom:10px;
 }
 .all ol li{
  width:20px;
  height:20px;
  background:#333;
  border:1px solid #ccc;
  font-weight:bold;
  text-align:center;/*左右居中*/
  line-height:20px;/*文本上下居中*/
  float:left;
  list-style:none;
  margin-left:10px;
  color:#ccc;
  margin-top:10px;/*让放大的li和没有放大的li下边框对其*/
 }
 .all ol .current{
  width:30px;
  height:30px;
  line-height:30px;
  border:1px solid #f60;
  color:#f60;
  margin-top:0;/*让放大的li和没有放大的li下边框对其*/
  cursor:pointer;/*增强用户体验 变小手*/
 }
 </style>
 </head>

 <body>
 <div class="all">
 <ul>
  <li><img src="01.jpg" width="600" height="300"/></li>
  <li><img src="02.jpg" width="600" height="300"/></li>
  <li><img src="03.jpg" width="600" height="300"/></li>
  <li><img src="04.jpg" width="600" height="300"/></li>
  <li><img src="05.jpg" width="600" height="300"/></li>
 </ul>
 <ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li class="current">5</li>
 </ol>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 #Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 #Javascript
Javascript中this绑定的3种方法与比较
Oct 13 #Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 #Javascript
jquery  实现轮播图详解及实例代码
Oct 12 #Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 #Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
You might like
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php文件缓存类汇总
2014/11/21 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
javascript使用call调用微信API
2014/12/15 Javascript
javascript 闭包详解
2015/07/02 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python代码注释规范代码实例解析
2020/08/14 Python
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
社区端午节活动方案
2014/01/28 职场文书
学校联谊协议书
2014/09/16 职场文书
员工教育培训协议书
2014/09/27 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
欠款起诉书范文
2015/05/19 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
青岛市的收音机研制与生产
2022/04/07 无线电