文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

纯js实现背景图片切换效果代码_javascript技巧

php中文网
发布： 2016-05-16 18:16:28
原创
1385人浏览过

html代码

复制代码 代码如下:




背景切换









因为javascript逻辑顺序比较强，所以要考虑引用js的位置
css代码
复制代码 代码如下:

body {font-size:12px;}
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;}
/*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/

javascript代码部分：
复制代码 代码如下:

window.onload=init;
var element= document.getElementsByTagName("li");
function init() //初始化背景色
{
var element= document.getElementsByTagName("li");
for(var i=0; i{
var k=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
}
}
function addclick()
{
for(var i=0; i{
var k=i+1;
if(window.attachEvent)
element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
else
element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
}
}
function bgchage(t) //根据色块改变背景色
{
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
}
addclick();

js部分要注意写事件的兼容，而且其实jq的思路就是将很多功能写成插件的形式供自己使用，用javascript写，可以写自己的类库，供反复使用，也无需承担jquery类库的负担。其实我也不是说jquery不好，从大的方面来说，jquery的插件大小影响并不大，前端事件看了百度前端交流会的视频，发现人家的类库也都是js自己写的，这给了我继续学习js的动力。
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript正则表达式中参数g(全局)的作用_javascript技巧 下一篇：在次封装easyui-Dialog插件实现代码_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
js如何生成UML图表 动态UML图表绘制解决方案 JavaScript生成UML图表的核心是通过解析代码并使用图表库可视化结构。1.使用解析器（如Acorn）提取类、方法等信息，构建结构数据；2.利用Mermaid、PlantUML或jsPlumb将数据绘制成图；3.动态图表可通过Proxy监控函数调用并更新图表；4.选择库时考虑图表类型、定制性、性能等因素；5.集成到开发流程中可提升协作效率，如自动生成文档或集成至CI/CD。
2025-06-23 17:03:02
812
js如何操作Web Share API Web分享功能的4种调用方式 结论：JS操作WebShareAPI需调用navigator.share()，同时考虑兼容性、数据格式和用户体验。具体步骤如下：1.调用前检查浏览器是否支持WebShareAPI，使用if(navigator.share)判断，不支持时提供备选方案如复制链接；2.支持的数据格式包括title、text和url，通过shareData传递参数，并使用Promise处理成功或失败；3.分享失败时通过.catch()捕获错误并根据error.name提示用户具体问题；4.WebShareAPI还支持文
2025-06-23 16:48:02
419
js本地storage存储_js本地storage操作技巧大全 使用JavaScript本地存储可提升用户体验并减少服务器压力，其核心方式是localStorage和sessionStorage。1.localStorage用于长期存储数据，除非手动清除；2.sessionStorage仅在当前会话有效，关闭标签页后清除；3.两者都提供setItem、getItem、removeItem和clear方法操作数据；4.存储对象时需用JSON.stringify转换为字符串，读取时用JSON.parse还原；5.遇到存储容量限制可压缩数据、分片存储或改用Inde
2025-06-23 16:15:02
578
js如何实现暗黑模式切换 前端主题色切换最佳实践 实现暗黑模式切换的核心方法是使用CSS变量和JavaScript动态修改主题样式。1.定义CSS变量分别对应亮色和暗色模式的颜色值；2.通过JavaScript监听切换操作，修改根元素的dataset属性来切换主题，并利用localStorage保存用户选择；3.页面加载时根据系统偏好设置默认主题；4.使用prefers-color-scheme媒体查询检测系统主题变化并更新页面；5.可选CSS类名切换方案，通过JavaScript切换类名实现兼容性更强的主题管理；6.性能优化方面包括使用CSS
2025-06-23 16:00:03
621
js如何判断字符串是否为空 4种判断空字符串的简便方法！ 判断JS字符串是否为空的核心方法有三种，且各有适用场景。1.检查length属性：若str.length===0，则字符串为空，但包含空格时不为0；2.使用正则表达式/^\s*$/可判断字符串是否为空或仅含空白字符；3.利用类型转换特性，空字符串在布尔上下文中为false，但需注意0、null、undefined也会被转为false。此外，处理用户输入时可结合trim()去除前后空格。常见空字符串场景包括用户未填写表单、API返回空字段、读取Cookie或Storage失败等。避免错误的方法有前
2025-06-23 15:57:02
275
js如何实现页面元素拖拽功能 元素拖拽交互的4种实现技巧！ 页面元素拖拽的核心在于监听鼠标事件并改变元素位置。1.使用mousedown、mousemove、mouseup事件实现基础拖拽逻辑，记录初始位置并更新元素坐标；2.为提升流畅性，使用requestAnimationFrame确保位置更新在浏览器重绘前执行；3.处理边界限制时，在mousemove中通过Math.min和Math.max控制元素位置范围；4.实现多元素拖拽可通过维护currentDraggingElement状态或使用事件委托优化性能；5.触摸设备需监听touchstart、to
2025-06-23 15:43:01
468
js如何操作CSS变量 js动态操作CSS变量的5种场景 JS操作CSS变量的核心是使用setProperty和getPropertyValue方法；1.通过document.documentElement.style.setProperty('--variable','value')可动态设置变量；2.可用于动态主题切换，通过按钮点击修改主题颜色变量；3.滚动时修改变量实现导航栏透明度渐变动画；4.数据可视化中动态设置柱状图高度；5.响应式设计中根据屏幕尺寸调整字体大小；6.表单验证时根据输入有效性改变输入框样式。
2025-06-23 15:39:02
562
js如何操作摄像头权限 摄像头权限请求的3种实现方式 JavaScript中无法直接操作摄像头权限，必须通过navigator.mediaDevices.getUserMedia()方法请求用户授权。1.该方法属于WebRTCAPI，用于访问摄像头或麦克风，需传入媒体类型参数如{video:true,audio:false}；2.用户授权后返回MediaStream对象，可用于绑定到video标签播放视频流；3.若用户拒绝授权或发生错误，Promise会进入catch分支，可通过err.name判断具体错误类型如NotAllowedError、No
2025-06-23 15:29:02
399
js中多个条件并列判断的最佳写法 当处理多条件判断时，使用对象、Map或策略模式等方法能显著提升代码的可读性与可维护性，并优化性能。传统的if/else或switch语句在面对大量条件时会导致冗长、嵌套复杂的代码结构，增加出错概率，且难以扩展和修改。1.使用对象或Map可将条件与操作直接映射，减少冗余代码，提高查找效率；2.策略模式通过封装不同算法到独立类中，实现逻辑解耦与动态切换，增强可扩展性与灵活性；3.函数式编程利用高阶函数和函数组合简化条件判断流程，提升代码简洁性与可测试性；4.决策表以表格形式组织复杂条件逻辑，使结构清
2025-06-23 15:25:01
509
js如何操作Web Components 组件化开发的4个实践技巧 WebComponents组件化开发主要通过自定义元素、ShadowDOM、模板插槽和组件通信实现。1.自定义元素是核心，用于封装复杂逻辑，如创建独立的日期选择器组件；2.ShadowDOM提供样式和结构的隔离，防止全局污染；3.模板和插槽增强组件灵活性，允许定义可重用HTML片段并插入自定义内容；4.组件通信通过自定义事件和属性实现，支持组件间交互与控制。掌握这四个技巧可提升代码的可维护性和复用性。
2025-06-23 14:56:02
768
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部