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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
JavaScript实现拖拽功能
Feb 11 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中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php获取域名的google收录示例
2014/03/24 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python和opencv实现抠图
2018/07/18 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python中logging日志库实例详解
2020/02/19 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
"序列点" 是什么
2016/07/29 面试题
乐观大学生的自我评价
2014/01/10 职场文书
会议活动邀请函
2014/01/27 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
党员对照检查材料
2014/09/22 职场文书
见习期个人总结
2015/03/05 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
Python之基础函数案例详解
2021/08/30 Python