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 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
学校后勤人员职责
2013/12/27 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
终止劳动合同协议书
2014/04/14 职场文书
元旦晚会活动总结
2014/07/09 职场文书
团队拓展活动方案
2014/08/28 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书