...轮换效果用Jquery制作原理各是怎么样的?谢谢

发布网友发布时间：2024-10-14 14:06

共2个回答

热心网友时间：2024-10-14 14:08

　　看到的那个背景图片其实是一个div（bgIn）里面嵌套了两个子div(bg-1和bg-2)，两个子div只是设置了宽，背景图片，它们横向左对齐排列。然后控制父div(bgIn)的left属性，让这个div(bgIn)相对于它的父div(bg)中左右移动而已。你用chrome的审查元素就能看到的。

　　最外边那个div(bg)则主要是控制z轴，让它显示在页面下面

　　而这些设置好之后，用jquery的toggle()函数和animate()函数简单的控制一下bgIn的left属性和过渡时间就能实现了。

<div class="bg-list p-a" id="bg">
<div class="bg-in p-a" id="bgIn" style="left: -1349px;">
<div class="bg-1" style="width: 1349px;"></div>
<div class="bg-2" style="width: 1349px;"></div>
</div>
</div>
.bg-list{ top:0; left:0; overflow:hidden; width:100%; height:100%; z-index:10;}
.bg-in{height:100%;top:0; left:0; width:20000px;}
.bg-in div{ height:826px; float:left;background-repeat:no-repeat; background-position:center top;}
.bg-1{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_1.jpg);}
.bg-2{ background-image:url(http://ossweb-img.qq.com/images/codo/201304/index_bg_2.jpg);}

热心网友时间：2024-10-14 14:14

这个有挺多的表现形式，好理解的就是

例如5张图的：

你的窗口大小：
口
5张图片大小：
口口口口口

默认看，是一张图，其他4张在右边没显示出来，用jquery把第一张的margin-left修改为宽度的负值，例如图片宽度是960px，那么用 $('img1').animate({'margin-left': '-960px'}, 500)，500毫秒的过度动画将图片过度到左侧-960px位置，那么第二张图就出来了，这就成了动画。

其他方式有更多表现形式，例如覆盖型：
窗口：
口
图片形式：
口
口
口
口
口

一张盖一张，第一张有消失的动画，并放到序列最后，则第二张展现。

再有就更复杂了，你可以找现成的插件直接用。

热心网友时间：2024-10-14 14:11

　　最外边那个div(bg)则主要是控制z轴，让它显示在页面下面

　　而这些设置好之后，用jquery的toggle()函数和animate()函数简单的控制一下bgIn的left属性和过渡时间就能实现了。

热心网友时间：2024-10-14 14:06

全部频道

...轮换效果用Jquery制作原理各是怎么样的?谢谢