jquery 图片轮换效果


Posted in Javascript onJuly 29, 2010

效果图:
jquery 图片轮换效果
代码中存在的错误欢迎大家指正

/** 
* @author leepood 
* @title 图片自动轮换效果 
* @version v2.0 
* @E-Mail leepood@gmail.com 
* @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数 
*/ 
function changeImages() 
{ var setting={ 
'width':'330px', 
'height':'200px', 
'images_count':'4', 
'time':'1800', //图片切换的速度 
'imageschange_border_color':'#fcf0a1' 
}; 
var imagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title':'秋天,一片金色','target':'_blank'}, 
{'src':'images/2.bmp','href':'http://www.163.com','title':'春天,给人一片生机的感觉','target':'_blank'}, 
{'src':'images/3.bmp','href':'http://iagyje.blog.163.com','title':'龙眼最好吃了,我每次吃好多的','target':'_blank'}, 
{'src':'images/4.bmp','href':'http://www.sina.com/','title':'火红的枫叶啊,有机会看看去','target':'_blank'}]; 
//添加元素,定义变量 
var $div_imageschange=$("#imageschange"); 
$div_imageschange.children().css("margin","0px").css("padding","0px"); 
$div_imageschange.append("<div id='images_button'></div>"); 
$div_imageschange.append("<div id='images_title'></div>"); 
var $div_images_title=$("#images_title"); 
var $div_images_button=$("#images_button"); 
var count=setting.images_count; 
for(var a=0;a<count;a++) 
{ 
var b=a+1; 
$div_images_button.append("<a id='"+b+"'>"+b+"</a>"); 
} 
var $link_buttons=$("#imageschange a"); 
//设置元素的初始属性 
//最外层容器,容纳所有元素 
$div_imageschange.css("width",setting.width) 
.css("position","relative") 
.css("height",setting.height) 
.css("border","solid 1px "+setting.imageschange_border_color); 
//容纳按钮的元素 
$div_images_button.css("position","absolute") 
.css("height","20px") 
.css("right","0px") 
.css("bottom","21px") 
.css("opacity","1") 
.css("float","right"); 
//容纳文字说明的元素 
$div_images_title.css("position","absolute") 
.css("height","20px") 
.css("width",setting.width) 
.css("bottom","0px") 
.css("right","0px") 
.css("background-color","black") 
.css("opacity","0.6") 
.css("font-size","12px") 
.css("color","white"); 
//按钮组合 
$link_buttons.css("width","15px") 
.css("height","15px") 
.css("border","solid 1px #fcf0a1") 
.css("display","block") 
.css("margin","0 5px 5px 5px") 
.css("font-size","12px") 
.css("text-align","center") 
.css("float","left") 
.css("color","white") 
.css("text-decoration","none"); 
//初始化设定 
$div_imageschange.css("background-image","url('images/1.bmp')"); 
$div_images_title.html(imagesArray[0].title); 
$("#images_button a:first").css("background","#fcf0a1"); 
function change(index){ 
$div_imageschange.css("background-image", "none"); 
$div_imageschange.css("background-image", "url('" + imagesArray[index].src + "')"); 
$div_images_title.html(""); 
$div_images_title.html(imagesArray[index].title); 
$($link_buttons[index]).attr("href", imagesArray[index].href).attr("target", imagesArray[index].target); 
$link_buttons.css("background",""); 
$($link_buttons[index]).css("background","#fcf0a1"); 
}; 
//自动切换代码 
function autochange(){ 
var i=0; 
setInterval(function(){ 
change(i); 
if(i==setting.images_count-1) 
{ 
i=-1; 
} 
i++; 
},setting.time); 
} 
autochange(); 
//手动切换代码 
$link_buttons.each(function(i){ 
$(this).hover(function(){ 
change(i); 
}); 
}); 
}; 
$(document).ready(function(){ 
changeImages(); 
});

要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数
Javascript 相关文章推荐
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 #Javascript
基于jQuery制作迷你背词汇工具
Jul 27 #Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 #Javascript
js操作二级联动实现代码
Jul 27 #Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 #Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 #Javascript
XENON基于JSON变种
Jul 27 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
vue组件的写法汇总
2018/04/12 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
bpython 功能强大的Python shell
2016/02/16 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python简单的三元一次方程求解实例
2020/04/02 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
促销活动总结范文
2014/04/30 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
【2·13】一图读懂中国无线电发展
2022/02/18 无线电