jQuery图片切换插件jquery.cycle.js使用示例

Cycle是一个很棒的jQuery图片切换插件，它提供了一个非常好的功能，通过使用插件的滑动功能，帮助你更简单地下载和导入Cycle插件。此时，请注意在引入jQuery主文件后引入它的代码。复制代码的代码如下：headscript类型=' text/JavaScript ' src=' http 3360 js/jquery-1 . 8 . 0 . min . js '/script script type=' text/JavaScript ' src=' http 3360 js/有jquery . cycle . all . js '/script link href=' style . CSS ' rel='样式表' type=' text/CSS '/head jquery . cycle . all . js in循环插件可以作用于页面中的任何一组对等元素。为了展示这一点，我们需要一个简单的HTML文档，其中包含产品封面和相关信息的列表。可添加到HTML文档正文：复制代码如下： ul id=' goods ' liimg src=' http : img/lenovopad . jpg ' alt=' lenovopad '/Div class=' title '联想a 3000(8GB/white)/Div class=' author '娱乐平板电脑，平板电脑/Div/Li liimg src=' http 3360 img/Note 3 . jpg ' alt=' Note 3 '/Div class='配备5.7英寸全高清华丽屏(Super AMOLED)，分辨率为1080P(1920*1080像素)/div/Li liimg src=' http : img/iPad air . png ' alt=' IP adair '/div class=' title ' iPad air/div class=' author ' iPad air。通过一系列改进，我们将iPad Air的尺寸比上一代iPad缩小了近四分之一。然而，当你拿起它时，你仍然会发现它坚固耐用。/div /li /ul给CSS添加一些样式，就可以在页面上显示复制的代码了。代码如下： html，body { margin : 0；padd : 0；} body { font: 62.5% Verdana，Helvetica，Arial，无衬线；color: # 000背景# fff} ul # goods { list-style : none；margin : 0；padd : 0；height: 210px宽度： 500 px；飞越：隐藏；} ul#goods li { list-style:无；margin : 0；padd : 0；height: 210px宽度： 500 px；背景-color : # F79321；相对位置：} ul # goods Li img { position : absolute；left : 0；top : 0；宽度： 300 px；height: 210px} ul #商品li。title { margin-left : 300 px；padding: 10px宽度： 180 px；font-weight:粗体；font-size : 1.2 em；背景色： # 000；color: # fff飞越：隐藏；} ul #商品li。作者{ margin-left : 300 px；padding: 10px 10px 0 10px宽度： 180 px；font-weight:粗体；背景-color : # F79321；color: # fff}此列表可以通过Cycle插件转换为交互式幻灯片。这个转换可以通过调用。在DOM中的适当容器上循环()方法。副本代码如下： $(文档)。ready (function () {$ ('# goods '))。cycle()；});这个语法再简单不过了。像以前使用的其他内置jQuery方法一样，我们也调用了。在包含DOM元素的jQuery对象上循环()。即使没有参数。cycle()是提供的，它可以帮助我们完成转换。包括修改页面的样式，使一次只显示一个列表项，然后每4秒以交叉淡入的方式切换到下一个列表项，如图。

为插件方法指定参数Cycle()方法为我们提供了很多参数。这里不描述每个参数的具体功能。请参考其他文件。我们可以修改Cycle插件两张幻灯片之间的播放速度和动画形式，修改幻灯片变换的触发方式。副本代码如下： $(文档)。ready (function () {$ ('# goods '))。循环({超时： 2000，速度3360 200，暂停：真})；});第一个超时选项指定幻灯片之间等待的毫秒数(2000)，而速度决定切换本身的毫秒数(200)。当“暂停”设置为“真”时，当鼠标进入时，幻灯片将暂停，这在幻灯片包含可以单击的链接时非常有用。Cycle中有一个很重要的参数：fx:它的功能是选择特效。复制代码如下： $ ('# goods ')。循环({fx3360' fade '，超时： 2000，速度3360 200，暂停： true })；包括以下特效blindx、cover、break NX、fade zoom、growx、scroll up、shuffle、slidex等等。源代码下载