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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
Vue父子组件传值的一些坑
Sep 16 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python制作数据导入导出工具
2015/07/31 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
Django-imagekit的使用详解
2020/07/06 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
2014年高三毕业生自我评价
2014/01/11 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
住房租房协议书
2014/08/20 职场文书
招标承诺书
2014/08/30 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
党性分析自查总结
2014/10/14 职场文书
护士个人年度总结范文
2015/02/13 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技