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 Form.elements[i]的使用实例
Nov 13 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue 组件开发原理与实现方法详解
Nov 29 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
简单分析python的类变量、实例变量
2019/08/23 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python网络编程之五子棋游戏
2020/05/14 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
成立公司计划书
2014/05/07 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
委托书格式
2014/08/01 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年化验室工作总结
2014/11/21 职场文书
党员示范岗材料
2014/12/19 职场文书
小学生通知书评语
2014/12/31 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
升职自荐书
2019/05/09 职场文书