轮播图的实现(jQuery)(一,思路)

来源:转载

实现样式 + 源代码


功能:
实现每3秒向右滚动一幅图
点击左/右方块一次使图片向左/右滚动一次
点击底部方块使相应图片展示出来,并且滚动到相应图片时对应方块变色
可以循环播放
技术难点:
轮播图的轮播移动效果(尤其是使它能够循环播放)
如果轮播图的html代码如下所示




  • a

  • b

  • c

  • d

  • e

  • a




*{
margin:0;
padding:0;
}
/*轮播图整体容器*/
#slider{
width:400px;
height:248px;
overflow:hidden;
position:relative;
}
/*轮播图内容容器*/
#slider .slides{
display: block;
position:relative;
width:6000px;
height:248px;
}
/*轮播图具体内容容器*/
#slider .slides .slide{
float:left;
list-style-type: none;
width:400px;
height:248px;
/*以下样式可选,主要为了测试代码看的方便*/
box-sizing:border-box;
border:1px solid darkgreen;
text-align:center;
line-height:248px;
}

如果有n幅轮播图需要展示的话,再加上一个,内容和第1个轮播图相同


使用jquery的 ‘animate’ 实现轮播动画效果


移动的方法是对class为 slides 的 ul 结点的css属性 margin-left进行操作,向右移动一次即让其的 margin-left 的值减去轮播图的宽度(width),对于上述示例代码,就是 ‘ -= 400px ’;同理,如果向左则为加号


对循环的处理为


当向右移动到了最后一个图片区块,也就是上述例子的e时,下一次轮播到了最后一个图片区块,也就是第二个a,完成轮播的同时,立刻使它们的容器,也就是class为.slides的 ‘ul’ 的 margin-left 属性值变为 0,也就是立刻回到了第一个图片区块,这样再次向右轮播时就到了第二个区块,完成循环。这步操作可以在jquery的animate函数的第三个参数,也就是回调函数里实现


当向左移动到了第一个图片区块,也就是上述例子的第一个a时,下一次轮播就为空白了,这是我们不希望的,所以在轮播之前,操作它们的容器,也就是class为.slides的 ‘ul’ 的 margin-left 属性值,使其移动到最后一个图片区块,也就是最后一个a,这样向左轮播时就到了图片区块,也就是e,完成循环。这部操作可以在在执行animate函数之前对ul直接操作来实现


使用js函数setInterval函数来实现自动轮播

分享给朋友:
您可能感兴趣的文章:
随机阅读: