热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery图片轮换效果

重写了昨天的图片轮换,加入了自动切换效果,改变了布局,增强了可定制性,当然,还是有点小小的问题,在IE6+,chrome,firfox3.68下测试正常运行
效果图:

代码中存在的错误欢迎大家指正

代码如下:

/**
* @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_imageschange.append("
");
var $div_images_title=$("#images_title");
var $div_images_button=$("#images_button");
var count=setting.images_count;
for(var a=0;a{
var b=a+1;
$div_images_button.append(""+b+"");
}
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中加入相应图片的参数
推荐阅读
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 程序员妻子吐槽:丈夫北漂8年终薪3万,存款情况令人意外
    一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历,月薪仅3万元,存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
  • 几何画板展示电场线与等势面的交互关系
    几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举(ENUM)类型字段所有可能取值的方法,帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
author-avatar
周啸夫_919
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有