Rumah > php教程 > PHP开发 > teks badan

jQuery图片切换动画特效

高洛峰
Lepaskan: 2016-12-08 11:11:17
asal
1577 orang telah melayarinya

思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子!

首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似。但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,到最后一张的时候我们要做一个判断,让它移动回第一张或者最后一张。思路分析完了,下面看下我们的代码:

1、html代码

<div id="divBox">
  <div id="imgBox">
    <div class="img"><img src="0.jpg"/></div>
    <div class="img"><img src="1.jpg"/></div>
    <div class="img"><img src="3.jpg"/></div>
  </div>
</div>
<div id="bth">
  <button id="zou">左</button>
  <button id="you">右</button>
</div>
Salin selepas log masuk

divBox是一个显示图片的框

imgBox是包住所有图片的DIV,我们实现效果也是移动这个DIV就可以了

bth放了两个button按钮用来切换图片

2、CSS代码

#divBox{
height:315px;
width:750px;
position:absolute;
border:#000000 1px solid;
overflow:hidden;}
 
#imgBox{
position:absolute;
width:2550px;}
 
.img{
float:left;}
 
#bth{
margin-left:800px;}
Salin selepas log masuk

#divBox设置图片显示框的宽高,绝对位置,边框,还一个重要的属性是overflow,溢出隐藏,当这个DIV里的内容超出这个DIV的大小时,溢出的部分会被隐藏掉。

#imgBox设置绝对位置和宽度,这个宽度取决于你所有图片宽度的总和,我这里是2550px,有三张图片,每张图片宽为750px;如果这里不给宽度的话里面的小DIV无法左浮动。

.img设置左浮动,让所有图片向左浮动,保持在一条水平线上。

#bth 设置外边距,因为上面的div设置了绝对位置所以这个div会被盖住看不见了,所以把这个div挪出来。

3、脚本代码

$(function(){
  //定义一个变量保存距离左边的位置
  var leftNum=0;
  $("#zou").click(function(){
    if(leftNum==0){
      //移动到最后一张图片
      $("#imgBox").animate({left:leftNum=-1500},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum+750},500);
    }
     
  });
   
  $("#you").click(function(){
    if(leftNum==-1500){
      //移动到第一张图片
      $("#imgBox").animate({left:leftNum=0},500);
    }else{
      $("#imgBox").animate({left:leftNum=leftNum-750},500);
    }
     
  });
});
Salin selepas log masuk

   

提示:记得导入jQuery包

脚本代码我写了两个单击事件,定义了一个保存距离左边位置的属性leftNum

首先看一下我们的左切换按钮单击事件:当我们单击按钮时,首先判断leftNum是否为0,如果为0,那么就是第一张图片,第一张图片左边已经没图片了怎么办,所以我们让他跳到最后一张图片,我们调用animate方法实现动画效果,这里我写的是left:left=-1500,为什么是-1500呢,left等于0时是第一张图片,left等于-750的时候是第二张图片,left等于-1500时就是第三张图片,所以最后一张图片的位置=-(图片宽度)X(图片总数)-1。如果leftNum不为0时,我们就在原来的基础上加750px。

右切换按钮的原理和左切换按钮相似,我就不解释那么多了。

 4、小结:

看懂的小伙伴们可以自己去实践一下,毕竟实践出真理。

如果想做的更好看的同学,可以私信我,毕竟还有先功能我没讲,比如弄几个圆点在图片上面,当我们点击圆点时就动画切换到相对应的图片上,还可以设置图片轮播效果,每隔多少秒切换一次图片。

还有就是按钮的话,大家也可以弄的漂亮一些,可以在图片左边和右边加一个图片的按钮,这样和更美观

201611395758206.jpg

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!