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 相关文章推荐
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
layUI的验证码功能及校验实例
Oct 25 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
详解Python的单元测试
2015/04/28 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python中get和post有什么区别
2020/06/19 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
中专自荐信
2013/10/13 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
体育运动口号
2014/06/09 职场文书
安全责任书
2015/01/29 职场文书
世界环境日活动总结
2015/02/11 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
感恩的心主题班会
2015/08/12 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server