jQuery动画效果图片轮播特效,jquery动画播特效

一、HTML代码

jQuery动画效果图片轮播特效,jquery动画播特效

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的特效:传统轮播。

图片 1

一、需求分析

  1. 提供很多尺寸相等的图片,一排紧挨着显示。

  2. 左右有两个切换按钮,用来控制显示上一张还是下一张。

3.
右下方有指示器”小圈圈”,用来提示显示到第几个图片;也可以点击它,进行图片的切换。

  1. 每隔一个固定的时间,图片会自动滚动。

5.
当鼠标放到图片上面的时候,会停止自动滚动;当鼠标离开后,再经过固定间隔时间后,又会自动播放。

二、代码剖析

1. 用html代码搭建框架

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li><a href="#"><img src="images/0.jpg"/></a></li> 
      <li><a href="#"><img src="images/1.jpg"/></a></li> 
      <li><a href="#"><img src="images/2.jpg"/></a></li> 
      <li><a href="#"><img src="images/3.jpg"/></a></li> 
      <li><a href="#"><img src="images/4.jpg"/></a></li> 
    </ul> 
    <div id="btn"> 
      <div id="leftBtn"></div> 
      <div id="rightBtn"></div> 
    </div> 
    <ul id="indicator"> 
      <li class="current"></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
    </ul> 
  </div> 
</body> 

1> id为container的div,是整个轮播效果的容器。
2> id为content的ul,里面存放的内容就是界面上面显示的滚动的图片。

3> id为btn的div,里面的两个子元素就是用来切换上一张还是下一张的按钮。

4> id为indicator的ul,用来显示指示器。

2. CSS代码改变显示样式

1> 下面两句代码,清除掉浏览器默认的间隙。

*{margin: 0; padding: 0;} 

2> 设置父容器的样式。

#container 
{ 
  width:560px; 
  height: 300px; 
  margin: 100px auto; 
  position: relative; 
  overflow: hidden; 
} 

由于显示的图片大小就是 560 X 300,
所以这里的父容器的大小也设置这么大,这里设置的margin,就是让父容器水平居中,垂直距离顶部100px,overflow表示如果显示的子元素超出了container的范围,就隐藏掉(注:由于显示的图片是一排显示的,如果不加上overflow:
hidden这个属性的话,就露馅了,去掉这个属性的话,效果如下:)。

图片 2

也就是说,如果不加上overflow: hidden
这个属性的话,所有的图片就会一排全部显示出来了。

最后一个就是定位属性 position: relative;
由于container是父容器,所以应该设置为relative,而它的所有的子元素要进行绝对定位的话,他们的position应该设置为absolute。这就是所谓的
“子绝父相” 原则。在绝对定位中都这么使用。

3> 设置content的样式

#container #content 
{ 
  list-style: none; 
  width: 10000px; 
  position: absolute; 
  left:0; 
  top:0; 
} 

#container #content li 
{ 
  float:left; 
} 

#container #content li img 
{ 
  border: 0; 
} 

注意到,content的width属性设置为了10000px,这是为了保证它能够存放足够多的图片。默认情况下,content中所有的li是块级元素,也就是他们会上下排列;所以加了一句float:left;让他们左右排列。而父级元素container设置了overflow:
hidden, 所以这些左右排列的图片只能看到第一个。
4> 设置左右切换按钮的样式

#container #leftBtn 
{ 
  position: absolute; 
  width:45px; 
  height: 45px; 
  top:108px; 
  left: 20px; 
  background: url(images/icons.png) no-repeat 0 0; 
  cursor: pointer; 
} 

#container #rightBtn 
{ 
  position: absolute; 
  width:45px; 
  height: 45px; 
  top:108px; 
  right: 20px; 
  background: url(images/icons.png) no-repeat 0 -45px; 
  cursor: pointer; 
} 

注意到,在获取左右按钮的时候,他们是取自同一张图片icons.png。只是图片截取的位置不一致,这就是所谓的”精灵”。就是为了减小图片占用大小,而把很多的小icon放置在一张图片上面,然后通过定位截取的办法,获取想要的部分。(注:关于怎样定位icon?

  1. 写代码慢慢调节;2. 用精灵裁切定位软件,如:CSS
    Sprites等)。图片设计大致如下:

图片 3

这张图片中,不仅包含了左右切换按钮,指示器的按钮也一并给出了,所以在书写指示器按钮的css代码时候,同样也可以使用这张图片。

4> 设置指示器的样式

#container #indicator 
{ 
  position: absolute; 
  right: 50px; 
  list-style: none; 
  bottom: 12px; 
}  

#container #indicator li 
{ 
  float: left; 
  cursor: pointer; 
  margin-left: 20px; 
  width:14px; 
  height: 14px; 
  background: url(images/icons.png) no-repeat -23px -127px; 
} 

#container #indicator li.current 
{ 
  background-position: -9px -125px; 
} 

代码中 #indicator li 设置的background的图片就是上图中空心的小圆圈,而
#indicator li.current
设置的background的图片就是上图中实心的大圆圈。所以刚开始的时候,默认选中第一个。
3. 用JQuery添加交互效果

1> 切换下一张(点击右边按钮)

$(function(){ 

  // 总的图片个数(用代码获取个数,扩展性比较强) 
  var totalCount = $("#container #content li").length; 
  // 当前处于第几个图片 
  var nowImage = 0; 
  $("#container #btn #rightBtn").click(rightBtnClick); 
  function rightBtnClick(){ 
    if(!$("#container #content").is(":animated")){ 
      if(nowImage == totalCount - 1){ 
        nowImage = 0; 
        $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
        $("#container #content").animate({"left": -560 * (totalCount -1 )}, 1000, function(){ 
        $("#container #content").css("left",0); 
      }); 
    } else { 
      nowImage++; 
      changeImage(); 
    } 
  } 
} 
}); 

changeImage 函数

function changeImage(){ 
  if(!$("#container #content").is(":animated")){ 
    $("#container #content").animate({"left": -560 * nowImage}, 1000); 
    $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
  } 
} 

代码中,当DOM元素加载完毕,就执行了$(‘#container #btn
#rightBtn’).click(rightClick),
也就是立刻执行了切换图片操作。在rightBtnClick函数中,先进行了content是否正在进行动画的判断,这样做的目的:防止动画在执行的过程,用户又进行强制的执行其他动画,会产生干扰,最终导致动画效果混乱。

如果有的话,则将标志变量nowImage指向下一个图片,并且执行changeImage函数中的代码:1.
将content中的所有图片左移一个图片大小的宽度;2.将指示器的图片也移动到对应的位置。

如果没有的话,并且图片现在是显示到了最后一个,则先执行动画,执行完毕后,立刻将content中所有的图片内容拉回到第一个,但是这里任然会穿帮,因为当前图片显示为最后一个后,你继续执行动画,是没有任何效果的,所以在这个动画执行期间是没有任何反应的,当动画时间执行完毕后,会突然在界面上出现第一个图片。

设计思想:为了解决这个问题,解决方案就是在这些图片之后追加一个与第一张相同的图片;这就是传统轮播的主要设计思想。所以当图片滚动到倒数第二章的时候;首先执行滚动动画,也就是滚动到预先准备的与第一张一模一样的图片,看起来似乎是滚动到了第一张,其实不然。在动画执行完毕后,立刻将content中所有的图片拉回到第一张。流程图如下:

图片 4

所以此刻修改一点代码,在代码的开头追加第一张图片

/*克隆轮播的第一个li追加到最后*/ 
$("#container #content li").first().clone().appendTo($("#container #content")); 

在rightBtnClick代码中,将nowImage == totalCount – 1 修改为 nowImage ==
totalCount – 2。
2> 切换上一张(点击左边按钮)

代码与点击右边按钮类似

$("#container #btn #leftBtn").click(function(){ 
  if(!$("#container #content").is(":animated")){ 
    if(nowImage == 0){ 
      nowImage = totalCount - 2; 
      $("#container #content").css("left",-560 * (totalCount - 1)); 

      $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 

      $("#container #content").animate({"left": -560 * nowImage}, 1000); 
    } else { 
      nowImage--; 
      changeImage(); 
    } 
  } 
}); 

3> 点击指示器按钮进行图片切换
它的设计思路,就是获取图片的索引,然后调用changeImage函数就可以了。

$("#container #indicator li").click(function(){ 
  nowImage = $(this).index(); 
  changeImage(); 
}); 

4> 添加定时执行动画的功能
也就是定时的调用点击右边按钮的代码;添加如下代码:

var timer = setInterval(rightBtnClick, 2000); 

5> 鼠标悬停在图片上,停止滚动;鼠标离开图片后,继续滚动
也就是对定时器进行开启和关闭;添加如下代码:

$("#container").mouseenter(function(){ 
  clearInterval(timer); 
}).mouseleave(function(){ 
  timer = setInterval(rightBtnClick, 2000); 
}); 

至此,一个传统轮播的效果就实现了,希望大家可以学以致用。

您可能感兴趣的文章:

  • 基于jquery的slideDown和slideUp做手风琴
  • 让人印象深刻的10个jQuery手风琴效果应用
  • jquery插件制作 手风琴Panel效果实现
  • 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
  • 基于JQuery的一句话搞定手风琴菜单
  • jquery实现手风琴效果实例代码
  • jquery手风琴特效插件
  • 基于jQuery实现多层次的手风琴效果附源码
  • Jquery 垂直多级手风琴菜单附源码下载
  • jQuery实现带玻璃流光质感的手风琴特效

为大家讲解的JQuery动画特效为手风琴,废话不多说,先看最终实现效果图。
一、实现原理分析 对应…

 /* window.onload&#27604; $ &#21152;&#36733;&#30340;&#26356;&#26202;&#19968;&#20123;&#65292;&#36825;&#26679;&#37027;&#20123;&#23485;&#24230;&#30340;&#35745;&#31639;&#22312;Chrome&#20013;&#23601;&#21487;&#20197;&#20934;&#30830;&#35745;&#31639;&#20102;*/ window.onload = function(){ /*&#35745;&#31639;&#19968;&#20010;segment&#30340;&#23485;&#24230;*/ var segmentWidth = 0; $("#container #content li").each{ segmentWidth+= $.outerWidth; $("#container #content li").clone().appendTo($("#container #content")); run; function run{ $("#container #content").animate({"left":-segmentWidth}, interval,"linear",function(){ $("#container #content").css; }); } $.mouseenter{ $("#container #content").stop.mouseleave{ var passedCourse = -parseInt($("#container #content").css; var time = 6000 * (1 - passedCourse/segmentWidth); run; };  

您可能感兴趣的文章:

  • 基于JQuery的实现图片轮播效果(焦点图)
  • 基于jquery的图片轮播 tab切换组件
  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备
  • jQuery图片轮播的具体实现
  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
  • jQuery制作简洁的图片轮播效果
  • jQuery插件slicebox实现3D动画图片轮播切换特效
  • 原生js和jquery实现图片轮播特效

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的…

轻松实现jquery手风琴效果,jquery手风琴

为大家讲解的JQuery动画特效为手风琴,废话不多说,先看最终实现效果图。

图片 5

一、实现原理分析

图片 6

对应的立体图:

图片 7

二、 HTML代码分析

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li class="first"> 
        <h3>真</h3> 
        <div><img src="images/0.jpg"/></div> 
      </li> 
      <li class="second"> 
        <h3>的</h3> 
        <div><img src="images/1.jpg"/></div> 
      </li> 
      <li class="third"> 
        <h3>爱</h3> 
        <div><img src="images/2.jpg"/></div> 
      </li> 
      <li class="forth"> 
        <h3>你</h3> 
        <div><img src="images/4.jpg"/></div> 
      </li> 
    </ul> 
  </div> 
</body> 
  1. id为container的div就是上面分析中的红色区域。
  2. id为content的ul就是用来存放所有的li。

  3. 每个li就是一个红色区域与对应图片的组合。

三、CSS代码分析

*{margin: 0; padding: 0;} 

    img{ 
      border:0; 
    } 

    #container 
    { 
      width:680px; 
      height: 300px; 
      margin: 100px auto; 
      position: relative; 
      border:3px solid red; 
      overflow: hidden; 
    } 

    #container #content 
    { 
      list-style: none; 
    } 

    #container #content li{ 
      width:590px; 
      height:300px; 
      position: absolute; 
    } 

    #container #content li.second{ 
      left:590px; 
    } 

    #container #content li.third{ 
      left:620px; 
    } 

    #container #content li.forth{ 
      left:650px; 
    } 

    #container #content li h3{ 
      float:left; 
      width: 24px; 
      height:294px; 
      border:3px solid blue; 
      background-color: yellow; 
      cursor: pointer; 
    } 

    #container #content li div{ 
      float: left; 
      width: 560px; 
      height:300px; 
    } 
  1. *和img标签用来去除系统默认的间隙等效果。
  2. #container就是在上面分析的可视区域,所以它的尺寸是 680 *
    300,并且它是所有子元素的容器,所以它是相对定位(position: relative)。

  3. #container #content就是去除掉ul默认的小圆点效果。

  4. 所有的li采用绝对定位,并且它们的大小均为 590 * 300,
    然后设置后面li的left值,并且设置li的h3(黄色区域)属性漂浮。

当上面所有的css样式设置完毕以后,最终呈现的效果就是分析图中的效果。

四、JQuery代码分析

手风琴的js交互代码其实非常简单,就是实时的改变对应li的绝对位置的left值就可以了,代码如下:

$(function(){ 

      $("#container #content li.first h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":590}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 

      $("#container #content li.second h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 

      $("#container #content li.third h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 

      $("#container #content li.forth h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":90}, 1000); 
      }); 

    }); 

以上就是本文的全部内容,希望对大家的学习有所帮助。

二、CSS代码

  1. id为container的div是最外层的包装,用来控制滚动区域显示的具体位置。2.
    id为content的ul用来包装那些需要滚动的图片。

  2. li元素就是用来包装具体的图片。

关于动画继续执行的代码,如下图分析:

以上就是jQuery实现图片无缝连续滚动的代码,希望对大家的学习有所帮助。

3.
设置6秒钟滚动完界面上面现有的图片,滚动完毕后,通过设置content的left值,将其整体拉回到初始状态,原理分析图的”图二”所示。然后递归调用run方法,完成无限滚动。

四、JQuery实现代码

*{margin: 0; padding: 0;} img{ border:0; } #container{ width:800px; height: 130px;  margin:100px auto; border:3px solid blue; overflow: hidden; position: relative; } #container ul{ list-style: none; width:10000px; position: absolute; } #container ul li{ float:left; margin-right: 20px; } 
  1. 当鼠标经过滚动区域的时候,动画立刻停止;
    当鼠标离开的时候,动画继续执行。

本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下

三、无缝连续滚动原理分析

  1. 先通过each遍历所有的li元素,计算出它们宽度之和。2.
    拷贝一份图片到现有图片的后面,原理分析图的”图一”所示。

这里说明一点,ul 的 width为什么设置为10000px。
因为无缝连续滚动的实现原理,就是在现有显示图片的基础上克隆一份,并且拼接在显示图片的后面,但由于显示图片的总宽度是未知的,所以为了安全性,最好将ul的width宽度设置比较大些。

网站地图xml地图