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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
介绍一下write命令
2012/09/24 面试题
高中军训感言600字
2014/03/11 职场文书
鉴定评语大全
2014/05/05 职场文书
教代会开幕词
2015/01/28 职场文书
出国留学单位推荐信
2015/03/26 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫