jQuery图片切换插件jquery.cycle.js使用示例
下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后。
<head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script> <link href="style.css" rel="stylesheet" type="text/css" > </head>
jquery.cycle.all.js在演示代码中有。
Cycle插件可以作用于页面中的任何一组同辈元素。为展示这一点,我们需要一个简单的
HTML文档,文档中是一个包含商品封面和相关信息的列表,可以添加到HTML文档的主体中：
<ul id="goods"> <li> <img src="img/lenovopad.jpg" alt="lenove pad" /> <div>联想A3000(8GB/白色)</div> <div>娱乐平板电脑,手机平板电脑 </div> </li> <li> <img src="img/note3.jpg" alt="note3" /> <div>三星GALAXY Note III</div> <div>三星Note系列的第三代产品,配备5.7英寸全高清炫丽屏(Super AMOLED), 分辨率为1080P(1920*1080像素)</div> </li> <li> <img src="img/ipadair.png" alt="ipadair" /> <div>iPad Air</div> <div>iPad Air拥有令人惊叹的iPad Air纤薄轻巧。通过一系列改进,我们将iPad Air 的体积比上一代iPad减小了近四分之一.尽管如此,当拿起它时,你仍会发觉它依然坚固耐用。</div> </li> </ul>
在CSS中加入一些样式，就可以在页面中显示出来了
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
ul#goods {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
overflow: hidden;
}
ul#goods li {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
background-color: #F79321;
position: relative;
}
ul#goods li img {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 210px;
}
ul#goods li .title {
margin-left: 300px;
padding: 10px;
width: 180px;
font-weight: bold;
font-size: 1.2em;
background-color: #000;
color: #fff;
overflow: hidden;
}
ul#goods li .author {
margin-left: 300px;
padding: 10px 10px 0 10px;
width: 180px;
font-weight: bold;
background-color: #F79321;
color: #fff;
}
通过Cycle插件可以将这个列表转换成可以交互的幻灯片。在DOM中适当的容器上调用.cycle()方法,就可以实现这一转换。
$(document).ready(function() {
$('#goods').cycle();
});
这个语法简单得不能再简单了。和之前使用其他内置的jQuery方法一样,我们也在一个包含DOM元素的jQuery对象上调用了
.cycle()。即使没有提供任何参数 .cycle()也可以帮我们完成转换工作。其中包括修改页面的样式,
以便每次只显示一个列表项,然后每4秒就以交叉淡入淡出的方式切换到下一个列表项，如图
为插件方法指定参数
Cycle()方法为我们提供了非常多的参数,具体每个参数的具体作用 在此不一一叙述,请查阅其他文档
我们可以修改Cycle插件的两个幻灯片之间的播放速度和动画形式,修改幻灯片变换的触发方式。
$(document).ready(function() {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});
第一个timeout选项用于指定切换幻灯片之间等待的毫秒数(2000),而speed决定切换本身要花的毫秒数(200)。
在把pause设置为true的情况下,幻灯片会在鼠标进入时暂停播放,这在幻灯片中包含可以单击的链接时非常有用。
其中Cycle有一个很重要的参数：fx：作用是选择特效。
$('#goods').cycle({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});
包括以下特效blindX,cover,curtainX,fadeZoom,growX,scrollUp,shuffle,slideX等等。
源码下载
-
本文向大家介绍jquery图片切换插件，包括了jquery图片切换插件的使用技巧和注意事项，需要的朋友参考一下 以上就是本文给大家分享的代码的全部内容了，希望大家能够喜欢
-
我想做一些有趣的事情，例如，我在我的网站上有一个图像，当一个按钮被触发时，我想更改它，但当按钮再次被点击（或添加相同的img到它）时，我想将它恢复到原来的状态，并在事件被点击时一直重复这一操作。我怎样才能做到这一点呢？ 这是我当前的Jquery，但它只对一次单击起作用 Html代码 资产
-
本文向大家介绍jQuery插件slick实现响应式移动端幻灯片图片切换特效，包括了jQuery插件slick实现响应式移动端幻灯片图片切换特效的使用技巧和注意事项，需要的朋友参考一下 jQuery响应式手机端移动端幻灯片图片切换特效插件slick，基于jQuery，功能非常强大，支持左右按钮切换、支持圆点切换、支持自定义切换数量，支持自定义切换速度、支持图片预加载、支持自动播放定义，效果非常的不错
-
本文向大家介绍jQuery实现图片渐入渐出切换展示效果，包括了jQuery实现图片渐入渐出切换展示效果的使用技巧和注意事项，需要的朋友参考一下 在这之前我们先看看我们要做的效果是什么样的： 我们要图片在过“一定时间”后自动切换，在右下角处有小方块似数字1,2,3,4，这些数字是根据图片的个数自动出现的，当鼠标经过的时候数字颜色有一定的变化； 下面我们来看看具体怎么实现。 第一步：先写简单的html
-
本文向大家介绍jQuery插件Slider Revolution实现响应动画滑动图片切换效果，包括了jQuery插件Slider Revolution实现响应动画滑动图片切换效果的使用技巧和注意事项，需要的朋友参考一下 这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动
-
本文向大家介绍JS实现可切换图片的幻灯切换效果示例，包括了JS实现可切换图片的幻灯切换效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与