jQuery实现图片切换效果

2024-10-20 19:48:37

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

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

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

动画效果：

<!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的简单图片切换效果

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip
jQuery简单实现banner图片切换

主要运用了定时器的原理,bind,trigger应用等复制代码代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>banner切换实现</title> <style type="text/css"> /* * @description: banner切换样式
基于jquery实现左右按钮点击的图片切换效果

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果二.功能分析 1.需求分析点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href
一个基于jquery的图片切换效果

下面的代码对于学习jquery的朋友是个参考html代码: 代码复制代码代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht
jQuery图片切换插件jquery.cycle.js使用示例

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri
jQuery插件Slider Revolution实现响应动画滑动图片切换效果

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque
jQuery 一个图片切换的插件

以下是参数说明: 参数名称描述 delay 图片切换速度,单位毫秒 maskOpacity 遮罩层透明度,1为不透明,0为全透明 numOpacity 数字按钮透明度,1为不透明,0为全透明 maskBgColor 遮罩层背景色 textColor 标题字体颜色 numColor 数字按钮字体颜色 numBgColor 数字按钮背景色 alterColor 数字按钮选中项字体颜色 alterBgColor 数字按钮选中项背景颜色插件代码及调用 - 插件名
jQuery插件slick实现响应式移动端幻灯片图片切换特效

jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
JQuery页面图片切换和新闻列表滚动效果的具体实现

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&g

jQuery实现图片切换效果

相关推荐

随机推荐