js日常小练习：实现图片的轮播效果

来源：互联网发布：中国语言地图集淘宝编辑：程序博客网时间：2024/05/03 00:16

1.代码效果：

3.源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>???????</title>
<style type="text/css">
.div
{
position:relative;/*设置最外层盒子为相对定位*/
width:1000px;/*宽1000像素*/
height:500px;/*高500像素*/
border-style:solid;/*设置边框风格*/
}
.div span
{
position:absolute;
background:gray;
left:450px;
top:50px;
}

.div img
{
position:absolute;
height:300px;
width:800px;
border-style:solid;
top:100px;
left:90;
}
.div ul
{
position:absolute;
left:350px;
bottom:10px;
list-style:none;
}
.div li
{
float:left;
width:30px;
height:30px;
background:white;
border-style:solid;
margin-left:20px;
margin-right:20px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var div=document.getElementById('div');//获取元素div
var span=div.getElementsByTagName('span')[0];//获取div下的psan标签
var Arrimg=div.getElementsByTagName('img')[0];//获取div下的img标签
var Arrul=div.getElementsByTagName('ul')[0]//获取div下的ul标签
var Arrli=Arrul.getElementsByTagName('li');//获取ul下的li标签
var img=['./img2.jpg','./img3.jpg','./img4.jpg'];//定义数组，存放所有图片路径
var i;
for(i=0;i<img.length;i++)
{
Arrli[i].index=i;//为所有li标签自定义属性
Arrli[i].onclick=function()//添加事件
{
for(i=0;i<img.length;i++)
{
Arrli[i].style.background='';
}
Arrimg.src=img[this.index]; //根据点击事件改变img标签的src值
span.innerHTML=this.index+1+'/'+img.length;//改变图片的编号
this.style.background='orange';

};
}
};
</script>
</head>
<body>
<div class="div" id="div">
<span></span>
<img src="">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>

阅读全文

0 0