发表于： 2020-04-18 22:43:14
0 1682
一、今天完成的事情
利用定时器切换图片的练习
<script>
window.onload = function () {
/*
* 使图片可以自动切换
* */
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var src = ["1.jpg","2.jpg","3.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量，用来保存定时器的标识
var timer;
//获取按钮
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器
* 点击多次就会开启多个定时器，这就导致图片的切换速度过快
* 并且我们只能关闭最后一次开启的定时器
* */
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
timer = setInterval(function () {
//使索引自增
index++;
if (index>src.length-1){
index = 0;
}//判断索引的值是否超过图片的数量，如果超过就使index = 0
//还有一种写法，判断index
// index = index%src.length;//当index的大小自增到和数组的长度一样时，那么index取余重新变为0
//修改img1的src属性
img1.src = src[index];
},1000);
};
btn02.onclick = function () {
clearInterval(timer);
//清除定时器，它可以接收任何的参数
//如果参数是一个有效的定时器的标识，则停止对应的定时器
//如果参数不是一个有效的标识，则什么也不做
}
}
</script>
</head>
<body>
<button id="btn01">点我啊</button>
<button id="btn02">停止吧</button>
<img id="img1" src="1.jpg" style="width: 300px;height: 300px"/>
</body>
</html>
延时调用
<script>
var num = 1;
//开启一个定时器
// setInterval(function () {
// console.log(num++);
// },1000);
/*
* 延时调用
* - 一个函树不马上执行，而是隔一段时间以后执行，而且只会执行一次
*
* 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
*
* 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
* */
setTimeout(function () {
console.log(num++);
},1000);
clearTimeout(1);//关闭一个延时调用
</script>
</head>
定时器的应用
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
}
</style>
<script>
window.onload = function () {
/*
* 点击按钮之后box1向右走
* */
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//点击按钮之后，使box1向右移动
btn01.onclick = function () {
// box1.style.left = "100px";
//开启一个定时器，来执行动画效果
setInterval(function () {
//获取box1 原来的left值
var oldValue = box1.offsetLeft;
alert(oldValue);
},30);
}
}
</script>
</head>
<body>
<button id="btn01">点我</button>
<br><br>
<div id="box1"></div>
</body>
轮播图
<style>
*{
padding: 0;
margin: 0;
}
img{
width: 300px;
height: 200px;
}
#outer{
/*设置宽和高*/
width: 320px;
height: 200px;
/*居中*/
margin: 0 auto;
/*设置背景颜色*/
background-color: yellowgreen;
/*设置padding*/
padding: 10px 0;
/*开启相对定位*/
position: relative;
/*裁剪溢出的内容*/
overflow: hidden;
}
/*设置imgList*/
#imgList{
/*去除项目符号*/
list-style: none;
/*设置ul的宽度*/
/*width: 1000px;*/
/*开启绝对定位，父元素要开启相对定位*/
position: absolute;
/*设置偏移量*/
/*
*每向左移动320px，就会显示到下一张图片
*/
left: 0;
}
#imgList li{
/*设置浮动*/
float: left;
/*设置左右外边距*/
margin: 0 10px;
}
/*设置导航按钮*/
#navDiv{
/*开启绝对定位*/
position: absolute;
bottom: 15px;
/*设置left的值*/
/*left: 130px;*/
}
#navDiv a{
/*设置超链接浮动*/
float: left;
width: 15px;
/*设置超链接的宽和高*/
height: 15px;
/*设置背景颜色*/
background-color: aquamarine;
/*左右外边距*/
margin: 0 5px;
/*设置半透明*/
opacity: 0.6;
/*兼容IE8的透明*/
filter:alpha(opacity=50);
}
/*设置鼠标移入的效果*/
#navDiv a:hover{
background-color: black;
}
</style>
<!--引入工具-->
<script>
window.onload = function () {
//设置imgList宽度
//获取imgList
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 320 * imgArr.length + "px";
//设置导航按钮居中
//获取navDiv
var navDiv = document.getElementById("navDiv");
//获取outer
var outer = document.getElementById("outer");
//设置navDiv
navDiv.style.left = (outer.offsetWidth - navDiv.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++){
//为每一个超链接添加一个num属性
allA[i].num = i;
allA[i].onclick = function () {
//关闭自动切换定时器
// clearInterval(timer);
//获取点击超链接的索引，并将其设置为index
index = this.num;
//切换图片
/*
* 第一张 0 lest 0
* 第二张 1 left -320px
* 第三张 2 left -640px
* */
imgList.style.left = -320*index + "px";
//设置修改正在选中的a
setA();
//使用move函数来切换图片
}
}
//自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA() {
//判断当前索引是否是最后一张图片
if (index>=imgArr.length-1) {
//则将index设置为0
index=0;
//此时显示的最后一张图片，而最后一张图片和第一张图片是一模一样
//通过css将最后一张切换成第一张
}
//遍历所有的a，并将他们的背景颜色设置为红色
for (var i = 0 ;i <allA.length;i++){
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
}
// var timer;
//创建一个函数，用来开启自动切换图片
function autoChange() {
//开启一个定时器，用来自动切换图片
/*timer =*/ setInterval(function () {
//使索引自增
index++;
if (index>=imgArr.length){
index %= imgArr.length;
}
//执行动画，切换图片
imgList.style.left = -320*index + "px";
},2000);
}
}
</script>
</head>
<body>
<!--创建一个外部的div，来作为一个大的容器-->
<div id="outer">
<!--创建一个ul，用来放置图片-->
<ul id="imgList">
<li><img src="1.jpg"> </li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
二、遇到的困难
暂时没有
三、明天要做的事情
学习
四、收获
学习了轮播图的制作，多加练习
返回列表
评论