JavaScript实现图片切换效果
程序员文章站
2022-03-27 08:34:46
本文实例为大家分享了javascript实现图片切换效果，自定义属性的应用 供大家参考，具体内容如下
...
本文实例为大家分享了javascript实现图片切换效果，自定义属性的应用 供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换实例</title>
<style>
body{
background-color: #a9a9a9;
margin:0px;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#pic{
width:670px;
height: 420px;
position:relative;
margin: 0 auto;/*整个div放到页面中间的位置*/
background:url(img/loading.png) no-repeat center;
background-color:#fff;
}
#pic img{
width:670px;
height: 420px;
}
#pic ul{
position: absolute;
top: 0px;
right: -50px;
}
#pic li{
width:40px;
height:40px;
margin-bottom: 4px;
background:#666;
}
#pic .active{
background: cadetblue;
}
#pic span{
top:0px;
}
#pic p{
bottom:0px;
margin:0;
}
#pic p,#pic span{
width: 670px;
height: 30px;
line-height: 30px;
text-align: center;
position:absolute;
left:0px;
color:#fff;
background-color:#333;
}
</style>
<script>
window.onload = function(){
var odiv = document.getelementbyid("pic");
var oimg = document.getelementsbytagname("img")[0];//有tag标签的地方就得有数组[0],否则不提示错误，但却会加载不出来需要的内容。
var op = document.getelementsbytagname("p")[0];
var onum = document.getelementsbytagname("span")[0];
var oul = document.getelementsbytagname("ul")[0];
var ali = oul.getelementsbytagname("li");//通过父标签找到的子标签，这里不能加数组[0]
var arrurl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
var arrtext = ["中原工学院图书馆","中工宿舍楼","玫瑰花","小猫咪","绿色盆栽"];
for(var i=0;i<arrurl.length;i++){
oul.innerhtml += "<li></li>";//添加用“+=”，该写用“=”
}
//初始化
//有数组的地方，大部分都有一个数字在静静的等待.数组配合数字以便找到需要的内容。
var num = 0;
oimg.src = arrurl[num];
op.innerhtml = arrtext[num];
onum.innerhtml = 1+num+'/'+arrurl.length;
//在ul中添加li,根据数组的长度，为ul添加li的数量
ali[num].classname = "active";//为标签添加class属性，需要用到classname
for(i=0;i<ali.length;i++){
ali[i].index = i;//索引值,需要添加对应关系，就要想到添加索引值
//定义的有数组，就不能忘记加[0]
ali[i].onclick = function(){
//点击按钮，找到与之对应的图片
oimg.src = arrurl[this.index];
op.innerhtml = arrtext[this.index];
onum.innerhtml = 1+this.index+'/'+arrurl.length;
//添加对应的点击时，li的图标发生变化，两种思路
//思路1：清空当前所有active样式，为当前添加此class属性（扩展性好，但是运行速度可能不好）
for(var i=0; i<ali.length; i++){
ali[i].classname = "";
}
this.classname = "active";
//思路2：清空前一个点击li的样式，为当前添加class属性（定点清除）
}
}
}
</script>
</head>
<body>
<div id="pic" >
<img src=""/>
<span>数量正在加载中......</span>
<p>文字说明正在加载中......</p>
<ul>
</ul>
</div>
</body>
</html>
javascript代码片段可以简化成如下：
<script>
window.onload = function(){
var odiv = document.getelementbyid("pic");
var oimg = document.getelementsbytagname("img")[0];
var op = document.getelementsbytagname("p")[0];
var onum = document.getelementsbytagname("span")[0];
var oul = document.getelementsbytagname("ul")[0];
var ali = oul.getelementsbytagname("li");
var arrurl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
var arrtext = ["中原工学院图书馆","中工宿舍楼","玫瑰花","小猫咪","绿色盆栽"];
for(var i=0;i<arrurl.length;i++){
oul.innerhtml += "<li></li>";
}
//初始化
var num = 0;
function fntab(){
oimg.src = arrurl[num];
op.innerhtml = arrtext[num];
onum.innerhtml = 1+num+'/'+arrurl.length;
ali[num].classname = "";
}
fntab();
for(i=0;i<ali.length;i++){
ali[i].index = i;
ali[i].onclick = function(){
num = this.index;
fntab();
}
ali[num].classname = "active";
}
}
}
</script>
效果图：
不会做动图！明天再试试！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。