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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
小程序实现留言板
Nov 02 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
antd form表单数据回显操作
Nov 02 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python之随机数函数的实现示例
2020/12/30 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
GWebs公司笔试题
2012/05/04 面试题
自荐信的格式
2014/03/10 职场文书
建筑安全标语
2014/06/07 职场文书
优秀班组申报材料
2014/12/25 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书