jQuery实现图片切换效果


Posted in jQuery onOctober 19, 2020

本文实例为大家分享了jQuery实现图片切换效果的具体代码,供大家参考,具体内容如下

动画:点击左右按钮实现图片切换

jQuery方法:animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq()

动画效果:

jQuery实现图片切换效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图片切换</title>
 <script src="../jquery.min.js"></script>
 
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
 
  }
  .main{
   margin: 50px auto;
   width: 538px;
   height: 405px;
   overflow: hidden;
   position: relative;
  }
  img{
   width: 538px;
   height: 405px;
  }
  .main .big{
   width: 3766px;
   height: 405px;
  }
  .big li{
   float: left;
   width: 538px;
   height: 405px;
  }
  .icon div{
   position: absolute;
   top: 180px;
   width: 40px;
   height: 35px;
   line-height: 35px;
   background: rgb(114,275,200);
   font-size:30px;
   font-weight: bold;
   text-align: center;
   color: #fff;
  }
  .left{
   left: 10px;
   border: 1px solid #003eff;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
  }
  .right{
   right: 10px;
   border: 1px solid #003eff;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
  }
  .small{
   position:absolute;
   bottom:10px;
   width: 538px;
   height:52px;
  }
  .small li{
   float: left;
   margin-left:4px;
   padding: 4px;
   width: 64px;
   height: 45px;
  }
  .small li.active{
   background: orange;
  }
  .small li img{
   width: 100%;
   height: 100%;
  }
 </style>
</head>
<body>
<div class="main">
 <ul class="big">
  <li title="0"><img src="images/1.jpg" alt="图片1"></li>
  <li title="1"><img src="images/2.jpg" alt="图片1"></li>
  <li title="2"><img src="images/3.jpg" alt="图片1"></li>
  <li title="3"><img src="images/4.jpg" alt="图片1"></li>
  <li title="4"><img src="images/5.jpg" alt="图片1"></li>
  <li title="5"><img src="images/6.jpg" alt="图片1"></li>
  <li title="6"><img src="images/7.jpg" alt="图片1"></li>
 
 </ul>
 <ul class="small">
  <li class="active"><img src="images/1.jpg" alt="图片1"></li>
  <li><img src="images/2.jpg" alt="图片1"></li>
  <li><img src="images/3.jpg" alt="图片1"></li>
  <li><img src="images/4.jpg" alt="图片1"></li>
  <li><img src="images/5.jpg" alt="图片1"></li>
  <li><img src="images/6.jpg" alt="图片1"></li>
  <li><img src="images/7.jpg" alt="图片1"></li>
 
 </ul>
 <div class="icon">
  <div class="left"><</div>
  <div class="right">> </div>
 </div>
 
</div>
<script type="text/javascript">
 $(document).ready(function () {
  var li_width=$(".big li").first().innerWidth();
  var index;
  //改变预览图片的类名
  function changeClass(){
  var index=$(".big li").attr("title");
  $(".small li").eq(index).addClass("active").siblings().removeClass("active");
  }
  //点击向右按钮,ul.big向左移动一张图片的宽度,显示下一张图片(此时第一张图片已经看不到)。动画结束后将第一张图片放到ul的最后,同时将ul.big的marginLeft设为0
  $(".right").click(function () {
   $(".big").stop(true).animate({"marginLeft":-li_width},1000,function () {
    $(".big li").first().appendTo($(".big"));
    $(".big").css("marginLeft", 0);
    changeClass();
     });
    });
  点击向右按钮,瞬间将最后一张图片移至最前端同时使ul.big向左移一张图片的宽度(显示的图片不变)。然后执行动画ul.big向右移动将刚移至前面的图片显示出来
  $(".left").click(function () {
   $(".big").css("marginLeft",-li_width);
   $(".big li").last().prependTo($(".big"));
   $(".big").stop(true).animate({"marginLeft":0},1000,function(){
    changeClass();
   }) ;
  });
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
You might like
再说下636单管机
2021/03/02 无线电
php 不同编码下的字符串长度区分
2009/09/26 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
js CSS操作方法集合
2008/10/31 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
《童年》教学反思
2014/02/18 职场文书
事业单位鉴定材料
2014/05/25 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Linux中sftp常用命令整理
2022/06/28 Servers