提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS代码 实现 效果 切换 背景图片
2023-06-13 09:14:25 时间
html代码
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>背景切换</title>
<linkhref="css/bgchage.css"type="text/css"rel="Stylesheet"/>
</head>
<body>
<div><ul><li></li><li></li><li></li><li></li></ul></div>
<!--<div>1</div><div>2</div><div>3</div><div>4</div>-->
</body>
<scriptsrc="js/bgchage.js"type="text/javascript"></script>
</html>

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

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

javascript代码部分：
复制代码代码如下:
window.onload=init;
varelement=document.getElementsByTagName("li");
functioninit()//初始化背景色
{
varelement=document.getElementsByTagName("li");
for(vari=0;i<4;i++)
{
vark=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
}
}
functionaddclick()
{
for(vari=0;i<4;i++)
{
vark=i+1;
if(window.attachEvent)
element[i].attachEvent("onclick",newFunction("bgchage("+k+");"));//创建事件不能直接.onclick而需要使用.attachEvent("事件",newFunction("被调函数("+参数+");"));IE6通过
else
element[i].addEventListener("click",newFunction("bgchage("+k+");"),false);
}
}
functionbgchage(t)//根据色块改变背景色
{
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
}
addclick();

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

相关文章