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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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 手机归属地查询 api
2010/02/08 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP函数超时处理方法
2016/02/14 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
培训演讲稿范文
2014/01/12 职场文书
学习标兵获奖感言
2014/02/20 职场文书
会计岗位职责范本
2014/03/07 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
研究生导师评语
2014/12/31 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
电影雷锋观后感
2015/06/10 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers