当前位置:首页 > jQuery技术文章 > jQuery图片切换插件jquery.cycle.js使用示例

jQuery图片切换插件jquery.cycle.js实例效果

  • 发布时间:
  • 作者:码农之家原创
  • 点击:76

这篇文章主要知识点是关于jQuery、图片切换、jquery.cycle.js、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

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

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能

下载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 class="title">联想A3000(8GB/白色)</div>
<div class="author">娱乐平板电脑,手机平板电脑 </div>
</li>
<li>
<img src="img/note3.jpg" alt="note3" />
<div class="title">三星GALAXY Note III</div>
<div class="author">三星Note系列的第三代产品,配备5.7英寸全高清炫丽屏(Super AMOLED),
分辨率为1080P(1920*1080像素)</div>
</li>
<li>
<img src="img/ipadair.png" alt="ipadair" />
<div class="title">iPad Air</div>
<div class="author">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秒就以交叉淡入淡出的方式切换到下一个列表项,如图
jQuery图片切换插件jquery.cycle.js使用示例 
为插件方法指定参数

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等等。

源码下载

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

实例讲解小程序input框失焦事件在提交事件前的处理

实例讲解vue addRoutes实现动态权限路由菜单

详细介绍React开发必不可少的eslint配置

Java的构造方法和对象的创建

用java实现简单的学生信息管理系统方案实例

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.829484

jquery简单图片切换显示效果实现方法

本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: html head meta http-equiv="content-type" content="text/html;charset=utf-8" / titlejquery图片切换效果/title script type="text/javascript" src="jquery-1.8.2.min.js"/script script type="text/javascript" $(function(){ $("#item li:not(:first)").css("display","none");//只显示第一张图片,其它隐藏 var bb = $("#item li:last"); var aa = $("#item li:first"); setInterval(function(){ if(bb.is(":visible")){ aa.fadeIn(1000).addClass("in"); bb.hide(); }else{ $("#item li:visible").addClass("in"); $("#item li.in").next().fadeIn(1000); $("#item li.in").fadeOut(1000).removeClass("in"); } },3000); }); /script /head style type="text/css" li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;} .in{display:block;} /style body ul id="item" liimg src="./images/11_b.jpg" //li liimg src="./images/22_b.jpg" //li l……

网友NO.502485

完美兼容各大浏览器的jQuery插件实现图片切换特效

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。 JS代码部分: (function ($) { var//申明全局变量 _eleTemp,//缓存变量 _eleThis = $(this),//当前元素 _eleImg = $('.zd-imgChange-img'),//图片组元素 _eleControll = $('.zd-imgChange-controll'),//控制器组元素 _eleChange = $('.zd-imgChange-change'),//切换元素 _icon = '●○',//动态图标 _imgTemplate = $(document.createElement('img')),//图片模版' _setting = { height: 100,//高 width: 200,//宽 imgs: new Array(),//图片地址 links: null,//点击地址 tips: null,//图片说明 timers: 3000//自动切换时间 },//配置 _timers = null//自动切换保存变量 $.fn.zoeDylan_ImageChange = function (op) { _eleThis = $(this); _setting = $.extend(_setting, op);//设置属性 //处理数据(查看是否为合法范围) _setting.timers = _setting.timers……

网友NO.928365

jQuery 图片切换插件(代码比较少)

// JavaScript Document ;(function($){ $.fn.extend({ "zj_ppt":function(value){ //默认参数定义 var $this = $(this); value = $.extend({ "time":2000, //间隔变化动画时间 "con":0, "sto":true, "count":"count", //切换小图的父级class名字 "src":"src", //切换小图片路径 "src_cur":"src_cur" //当前切换小图片路径 },value); //图片切换函数 function autopic(){ $("li",$this[0]).hide(); $("li:eq("+value.con+")",$this[0]).show(); $(value.count).find("ul li img").attr("src",value.src); $(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur); if(value.con$("li",$this[0]).length-2){ value.con = 0; }else{ value.con += 1; } } //每间隔多少时间执行一次图片切换 function sett(){ if(value.sto){autopic()}; setTimeout(sett,value.time); } //鼠标悬停时切换图片,并停止自动切换 $(value.count).find("ul li").hover(function(){ var _index = $(this).index(); value.con = _index; value.sto = false; autopic(); },function(){ var _inde……

网友NO.379812

基于jquery插件制作左右按钮与标题文字图片切换效果

本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code style type="text/css" *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;width:820px;margin:20px auto;} .ui-banner.ui-banner-invalid{display:none;} .ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{height:233px;} .ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;} .ui-banner ul{list-style-type:none;margin:0;padding:0;overflow:hidden;} .ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;} .ui-banner .ui-banner-slides li{display:none;position:absolute;} .ui-banner .ui-banner-slides li img{width:654px;height:233px;border:none;} .ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner .ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides li.ui-banner-slides-nex……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757