首页 / jQuery学习笔记 / jQuery学习笔记:如何使用jQuery开发一个滑动的轮播图,超简单!

jQuery学习笔记:如何使用jQuery开发一个滑动的轮播图,超简单!

轮播图是web里经常使用到的。之前写过一个滑动轮播图,效果来不错。写个笔记记录一下。

jQuery轮播图原理

轮播图的原理其实就是通过点击事件控制图片的滑动。最简单的例子就是jQuery给一个元素绑定click事件来控制轮播图的切换。要实现滑动效果,配合css样式,每次触发click事件,元素则向左或者向右偏移。

第一步:HTML DOM结构

该段代码是HTML的DOM结构。通常看到的轮播图结构都是使用ul无序列表来包含图片li元素。当然也可以使用div来控制。这个不是重点。重点是所有的图片要有一个共同的父级div和一个祖先级div。下面的父级div就是ul,祖先级div就是slider。

如何滑动:

slider的宽度是子元素li元素的宽度,而ul的宽度是所有子元素li元素的宽度。因为li元素需要滑动效果。例如li元素的宽度是500,那么ul的宽度就是2500。每次触发click事件,则ul向右或者向左偏移一个li元素的宽度。祖先级元素slider的overflow属性为hidden。这样每次滑动ul元素看起来就像li元素再滑动一样。

<div class="slider"> 
    <ul>
        <li><a href=""><img src="images/slide1.png" /></a></li> 
        <li><a href=""><img src="images/slide2.png" /></a></li> 
        <li><a href=""><img src="images/slide3.png" /></a></li> 
    </ul>
</div>

第二步:jQuery轮播图的CSS样式

@charset "utf-8";
*{
	margin:0;
	border:0;
	padding:0;
}
ul,ol,li{
	list-style: none;
}
.slider{
   width:900px;
   height:503px;
   margin:0 auto;
   overflow: hidden;
   position: relative;
}
.slider ul{
   position: absolute;
}
.slider ul li{
   float:left;
}
.slider .prev,.slider .next{
   position: absolute;
   top:45%;
   cursor: pointer;
   color:#fff;
   text-align:center;
   width:50px;
   background:rgba(0,0,0,0.5);
   height:30px;
   line-height: 30px;
}
.slider .prev{
   
   left:0;
}
.slider .next{
   right:0;
}

第三步:jQuery轮播图js代码

jQuery 的轮播图代码每一步都有一个注释。需要注意的就是.stop方法需要理解一下。.stop停止当前运行的动画。

.stop有两个参数,第一个:可选。布尔值,规定是否停止被选元素的所有加入队列的动画。默认是 false。第二个规定是:可选。布尔值,规定是否立即完成当前的动画。默认是 false。

$(function(){
   //初始化slider ul,position向左偏移为0
   $('.slider > ul').css({'left':'0px'});
   //所有图片的宽度
   var imgWidth = 0;
   //向左偏移量
   var leftNum = parseInt($(".slider > ul").css('left'));
   //图片的数量
   var imgNum = $(".slider > ul > li").length;

   //遍历图片,得出所有图片的宽度
   for (i = imgNum-1; i >= 0; i--) {
      imgWidth += $('.slider > ul > li').eq(i).width();
      //$('.slider').css({'height':$('.slider > ul > li').height()})
   }
   //将所有图片宽度赋值给ul
   $('.slider > ul').css({'width':imgWidth});
   //在ul后面添加控制按钮。
   $(".slider > ul").after("<div class='prev'>&larr;</div><div class='next'>&rarr;</div>");
   //当下一张图片的事件触发
   $(".slider .next").click(function(){
      //则向左偏移量-900,每触发一次-900。
      leftNum -= 900 ;
      //如果左侧偏移量总和等于所有图片宽度,则向左偏移量为0
      if(leftNum == parseInt(-imgWidth)){
         //$('.slider > ul').animate({'left':'0px'},1000);
         leftNum = 0;
      }
      //通过animate改变ul的向左偏移量
      $('.slider > ul').stop().animate({
         left:leftNum
      },1000);
      
   });
   //上一张图片
   $(".slider .prev").click(function(){
      leftNum += 900;
      
      if(leftNum == 900){
         //$('.slider > ul').animate({'left':imgWidth},1000);

         leftNum = -imgWidth + 900;
      }
      $('.slider > ul').stop().animate({
         left:leftNum
      },1000);
   });
   
});

下载该文章的源代码

jquery.rar

声明:转载请注明原文地址及作者姓名。 作者:Glary Joker 文章地址://glaryjoker.com/article/382.html
上一篇:已经是最后一篇了
下一篇:已经是最后一篇了

评论

登录后评论.