在忙其他项目,所以这周学得不多
复习DOM查询操作,增删改查操作,获取元素等
学习了轮播图的写法,并应用定时器实现定时自动切换,其余笔记在代码段中
<!DOCTYPE html>
<html>
<head>
<title>轮播图练习1</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer
{
/*裁剪溢出*/
overflow: hidden;
/*背景颜色*/
background-color: greenyellow;
width:420px;
height: 694px;
/*padding*/
padding: 5px 0;
/*div居中*/
margin: 50px auto;
position: relative;
}
#imglist
{
/*width:2100px;*/
list-style: none;
/*ul绝对定位脱离文档流*/
position: absolute;
/*设置偏移量显示下一张*/
left: -1680px;
}
#imglist li
{
list-style: none;
/*设置浮动*/
float: left;
/*设置左右外边距*/
margin: 0 10px;
}
#nav
{
margin: 0 auto;
width: 1000px;
/**/
position: absolute;
/*设置位置*/
bottom: 15px;
/*left动态设置*/
left: 147.5px;
/*这是自己计算的*/
}
#nav a
{
/*设置超链接浮动内联元素变成块元素，但是是排在一行的*/
float: left;
/*设置超链接的宽和高内联元素宽高不可设置需要转变为块元素*/
width: 15px;
height: 15px;
/*设置背景颜色*/
background-color: red;
/*设置左右外边距*/
margin:0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
/*设置鼠标移入效果*/
#nav a:hover
{
background-color: black;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取imgList
var imglist = document . getElementById("imglist");
//获取页面中所有的img标签
var imgArr = document. getElementsByTagName("img");
//设置imgList的宽度
imglist.style.width = 420* imgArr.length+"px";
/*设置导航按钮动态居中*/
//获取navDiv
var nav = document.getElementById("nav");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv的left值
nav.style.left = (outer.offsetwidth-nav.offsetWidth)/2 + "px";
// 默认索引
var index = 0;
//获取所有的a
var allA = document . getElementsByTagName("a");
//设置默认选中的效果
allA [index]. style. backgroundColor = "black";
// 点击超链接切换到指定图片
// 为所有超链接绑定单击响应函数
for (var i = 0; i <allA.length; i++) {
// 做标记，索引保存在对象的属性上
allA[i].num=i;
// 为所有超链接绑定单击响应函数
allA[i].onclick=function(){
// 当点击函数执行时关闭自动切换函数
clearInterval(timer);
// 获取点击超链接的索引，并将其设置为index
// 修改全局变量index的值
index=this.num;
// 切换图片
// 索引*宽度
imglist.style.left=-420*index+"px";
// 当点击函数执行完后又开启自动切换函数
autoChange();
// 使用move函数切换图片
// 修改正在选中的a
// 变黑，变红
setA();
};
}
// 开启自动切换图片
autoChange();
// 创建一个方法来设置选中的a
function setA()
{
// 判断当前索引是否是为最后一张图片，最后一张图片是和第一张图片一样的，特此需要这张图片将效果变好
if (index>=imgArr.length-1) {
// 将index设置为0,当切换到最后一张图片时此处可以恢复链接背景颜色，也就是跳转到第一个超链接，因为并没有设置所谓的最后那个超链接
index=0;
// 此时显示最后一张图片
// 通过css瞬间切换到第一张,即偏移量为0px
imglist.style.left=0;
}
// 遍历所有a，并将其背景颜色设置为红色
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor="";
//空串显示默认样式
}
//
allA[i].style.backgroundColor="black";
};
// 定义一个timer自动切换标识
var timer;
// 创建一个函数
function autoChange(){
// 开启一个定时器
timer=setInterval(function(){
// index自增
index++;
// 取模效果取消白屏，但是要出现ul往反向走
index%=imgArr.length;
// 判断index值
imglist.style.left=-420*index+"px";
setA();
},3000)
};
};
</script>
</head>
<body>
<div id="outer">
<ul id="imglist">
<li>
<img src="img/4.jpeg">
</li>
<li>
<img src="img/5.jpeg">
</li>
<li>
<img src="img/4.jpeg">
</li>
<li>
<img src="img/5.jpeg">
</li>
<li>
<img src="img/4.jpeg">
</li>
</ul>
<!-- 创建超链接 -->
<div id="nav">
<a href= "javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href="javascript: ;"></a>
<a href= "javascript: ;"></a>
</div>
</div>
</body>
</html>
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
