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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
Javascript的无new构建实例详解
May 15 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
js实现购物车商品数量加减
Sep 21 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/18 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python读取网页内容的方法
2015/07/30 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
简单了解Python中的几种函数
2017/11/03 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python如何将装饰器定义为类
2020/07/30 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
销售人员个人求职信
2013/09/26 职场文书
毕业生个人的求职信范文
2013/12/03 职场文书
端午节活动策划方案
2014/03/09 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
计划生育证明书写要求
2014/09/17 职场文书
公司文体活动总结
2015/05/07 职场文书
Python基本数据类型之字符串str
2021/07/21 Python