<!--
HTML：构建网页 CSS：修饰网页 切图工程师 网页设计师 静态页面
JavaScript：动态交互
平移滑动轮播图：
1.HTML 结构：可视化窗口 图片
2.CSS基本样式修饰：尺寸宽高 位置颜色
问题：1.图片从上到下排列显示？
原因：图片（行内块元素） 行内元素在一行中显示不下，会自动换行
窗口父元素宽度尺寸不够展示4张图
解决方法：1.浮动(不起效果)
2.在窗口和图片之间添加一个标签
3.做效果需要什么样的样式属性？
轮播图：切换图片 平移滑动：向左移动一张图片距离：看到平移过程transition过渡
margin-left:左外边取负值；position：absolute绝对定位偏移属性left
transform：translateX（）
4.间隔一定的时间，实现图片自动平移滑动
自动改变袋子div元素margin-left属性值（让它-600） 实现平移
利用js：改变HTML或者CSS属性值（大小尺寸，颜色，位置，网页显示内容）
js语法：1.定义变量： var 变量名称 =值； =赋值符号
1.变量：防止可变数据的容器
2.在页面中查找元素：
通过id属性值查找元素：document.getElementById("id属性值");
3.字符串拼接："margin-left:"+num+"px" = "margin-left:（num变量中的值）px"
4.间隔一定时间，自动切换图片
1.定义函数：function 函数名(){执行的代码}(不执行)
调用函数：函数名() （才执行）
作用：重复使用一段代码
2.间隔一段时间，就执行函数
定时器：循坏定时器：每间隔一定时间，就执行一次函数
setInterval(函数名称,间隔时间)
间隔时间 取值 毫秒数 不带单位
setInterval(lbt,4000)
5.问题：1.daizi会一直向左移动？
当展示到最后一张图，接下来展示第一张图
条件判断：1.if(判断表达式){语句1...}
判断表达式为true 就执行语句1 判断表达式为false 不执行
2.if(判断表达式){语句1...}else{语句2...}
判断表达式为true 就执行语句1 判断表达式为false 执行语句2
3.if(判断表达式){语句1...}
else if(判断表达式){语句2...}
else if(判断表达式){语句3...}
6.问题：最后一张图切换回第一张图时，从左向右移动
原因：从-1800变成0，transition
解决方法：最后一张图切换时 transition：none
优化：最后一张图从右向左切换回第一张
解决方法：把第一张图重复添加在最后（改变daizi宽和if中条件判断值）
第一张图等待时间很长？
原因：循坏定时器：seInterval
解决方法：定时器在最后一张图跳转到第一张图时，不等4S
一次性定时器：间隔一定时间，只执行一次函数
setTimeout(函数名，间隔时间);
利用一次性定时器达到循环定时器的效果：一次性定时器执行的函数最后，在次定义一遍一次性定时器
1.将定时器放到执行函数中 2.将定时器放到判断中
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ck{
width:600px;
height:400px;
border:1px solid red;
margin:0 auto;
overflow:hidden;
}
#daizi{
width:3000px;
height:400px;
margin-left:0px;
transition:all 1s linear;
}
#daizi>img{
width:600px;
height:100%;
float:left;
}
</style>
</head>
<body>
<!-- 平移滑动轮播图 -->
<div id="ck">
<div id="daizi">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/1.jpg">
</div>
</div>
<!-- 嵌套JavaScript语法 -->
<script>
var num=0; //定义变量为daizi的做外边距值，值初始值为0，可变
//移动daizi，实现图片切换
function lbt(){
//判断一下是不是最后一张图
if(num>-2400){
//不是最后一张图
num = num-600; //num现在减了600
document.getElementById("daizi").style ="margin-left:"+num+"px";
setTimeout(lbt,4000);
}
else{
num=0;//最后一张图，返回第一张图，不要看到过程，闪切
document.getElementById("daizi").style ="margin-left:"+num+"px;transition:none;";
setTimeout(lbt,100);
}
//把值给daizi的左外边距设置上
//利用js添加了一个style内联样式
//setTimeout(lbt,1000);
}
//每间隔4S，就切换一次图片
//setInterval(lbt,4000);
//一次性定时器实现循环定时器效果
setTimeout(lbt,4000);
</script>
<!-- <script src=""></script> -->
</body>
</html>
<!--
淡入淡出轮播图：
1.HTML结构：轮播图模块：图片切换,左右箭头，圆点按钮
2.CSS基本样式：宽高 位置 图片堆叠在轮播图中
3.市实现效果需要的样式？
图片切换：调整元素的堆叠顺序 z-index
淡入淡出：调整元素的透明度:opacity，transition
所有图片开始opacity:0,谁显示 z-index:1 opacity:1
4.利用js代码实现自动将 class="show"向下传递
1.查找页面中的元素：
利用id属性查找：document.getElementById(id属性值)
唯一的标签（元素）
利用class属性查找：document.getElementsByClassName(class属性值)
多个元素的集合 下标[0]
利用 选择器查找元素：document.querySelector(选择器);
唯一的元素（如果有多个元素，只会找第一个）
document.querySelectorAll(选择器)
多个元素的集合
利用元素之间的关系查找元素：
相邻关系:元素.nextElementSibling 下一个相邻的兄弟元素
2.控制台输出：（前端调试）console.log(输出内容);
3.设置下一个相邻元素的class属性值 .classNmae="show"
4.清除原来显示的图片class属性值 .className=""
5.每间隔一定的时间，重复执行切换图片
问题：1.null 空的对象 条件判断false 不是null 为true
2.查找元素:
通过元素自检的关系查找：
1.相邻元素： 元素.nextElementSibling 下一个元素
2.父子关系：父元素.firstElementChild 父元素的第一个子元素
圆点按钮：
1.HTML内容：ul li
2.CSS基本样式：宽高 颜色 边框 位置堆叠顺序
3.实现效果的样式？ 高亮状态
opacity
4.高亮状态跟随轮播图片切换一起传递 class=show
5.本身具备功能：点击对应圆点按钮，切换到对应图片淡入淡出显示
利用js实现点击圆点，这个原点class=show，对应的图片class=show
当点击发生时：
1.正在显示的圆点和图片都不显示
2.被点击的圆点显示
3.对应的图片显示
js代码：
1.添加点击事件：onclick属性
2.this使用方法：this代表元素本身 关键词
3.函数的参数使用：类比为 变量
定义函数时同步定义参数，参数--变量
调用函数时同步设置参数，实际变量值
4.对应关系：子元素在父元素中的位置 相同的
人为设定对应关系:给li和img 设置id 字母+数字 数字对应
字符串切割：字符串.slice(start,end)
第一个数字代表从下标为start开始切割（包含start）
第二个数字代表切割到下标为end结束（不包含end）
如果没有end值，代表切割到字符串结束
问题：点击圆点按钮，有时候会出现显示图片的时间很短，就跳到下一张？
原因：点击按钮同时，定时器一直在工作
解决方法：在点击函数最前面 清除定时器
在点击函数最后面 设定定时器
清除定时器：clearInterval() clearTimeout() 口号中一点加变量名称
左右箭头：
HTML和CSS
功能：左箭头 切换上一张图片
previousElementSibling 上一个相邻兄弟元素
lastElementChild 最后一个子元素
右箭头 切换下一张图片
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul,li{margin:0;padding:0;}
#lbt{
width:600px;
height:400px;
border:1px solid red;
margin:0 auto;
position:relative;
}
#ck{
width:100%;
height:100%;
position:relative;
}
#ck>img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
opacity:0;
transition:all 2s linear;
}
#ck>img.show{
z-index:1;
opacity:1
}
#ulbtn{
list-style:none;
position:absolute;
left:40%;
bottom:5%;
z-index:10;
}
#ulbtn>li{
width:20px;
height:10px;
border:1px solid black;
border-radius:5px;
float:left;
margin-right:10px;
background-color:#fff;
opacity:0.3;
}
#ulbtn>li.show{
opacity:0.9;
}
#btnleft,#btnright{
width:50px;
height:100px;
position:absolute;
left:0;
bottom:0;
z-index:10;
opacity:0.3;
}
#btnleft:hover,#btnright:hover{
opacity:0.7;
}
#btnleft{left:0;
top:40%;
}
#btnleft>img{transform:rotateZ(180deg);}
#btnright{left:91.6%;top:40%}
#btnleft>img,#btnright>img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<!-- 轮播图模块 -->
<div id="lbt">
<!-- 图片切换 -->
<div id="ck">
<img id="img1" src="img/1.jpg" class="show">
<img id="img2" src="img/2.jpg">
<img id="img3" src="img/3.jpg">
<img id="img4" src="img/4.jpg">
</div>
<!-- 圆点按钮 -->
<ul id="ulbtn">
<li id="li1" οnclick="libtn(this)" class="show"></li>
<li id="li2" οnclick="libtn(this)"></li>
<li id="li3" οnclick="libtn(this)"></li>
<li id="li4" οnclick="libtn(this)"></li>
</ul>
<!-- 左右箭头 -->
<div id="btnleft" οnclick="zuo()">
<img src="img/btn.jpg">
</div>
<div id="btnright" οnclick="next()">
<img src="img/btn.jpg">
</div>
</div>
<script>
//利用js代码 把 class=show向下传递，图片淡入淡出切换
function lbt(){
//1.找到class=show的图片，圆点元素
var imgshow = document.querySelector("#ck>img.show");
var lishow = document.querySelector("#ulbtn>li.show");
// console.log(imgshow.nextElementSibling); //控制台输出
//判断一下是不是最后一张，利用imgshow.nextElementSibling是否为null
if(imgshow.nextElementSibling){
//不是最后一张，把clss=show传递给下一个图片和圆点
//2.把class=show传递给下一个
imgshow.nextElementSibling.className = "show";
lishow.nextElementSibling.className = "show";
}
else{
//是最后一张，不能把clss=show传递给第一个图片和圆点
document.getElementById("ck").firstElementChild.className = "show";
document.getElementById("ulbtn").firstElementChild.className = "show";
}
//3.原来显示的图片清除class
imgshow.className="";
lishow.className="";
}
function zuolbt(){
//1.找到class=show的图片，圆点元素
var imgshow = document.querySelector("#ck>img.show");
var lishow = document.querySelector("#ulbtn>li.show");
//console.log(imgshow.previousElementSibling); //控制台输出
//判断一下是不是第一张，利用imgshow.previousElementSibling是否为null
if(imgshow.previousElementSibling){
//不是第一张，把clss=show传递给上一个图片和圆点
imgshow.previousElementSibling.className = "show";
lishow.previousElementSibling.className = "show";
}
else{
//是第一张，把clss=show传递给最后一个图片和圆点
document.getElementById("ck").lastElementChild.className = "show";
document.getElementById("ulbtn").lastElementChild.className = "show";
}
//3.原来显示的图片清除class
imgshow.className="";
lishow.className="";
}
var timer = setInterval(lbt,3000);
//定义鼠标点击圆点按钮触发的函数
function libtn(obj){
//先清除定时器
clearInterval(timer);
//boj现在在函数中代表的就是被点击的圆点按钮标签
//console.log(obj.id.slice(2));//字符串切割
//1.正在显示的圆点和图片都不显示
document.querySelector("#ck>img.show").className="";
document.querySelector("#ulbtn>li.show").className="";
//2.被点击的圆点显示
obj.className="show";
//3.对应的图片显示
var num=obj.id.slice(2);
document.getElementById("img"+num).className="show";
//重新设定定时器，恢复轮播效果
timer = setInterval(lbt,3000);
}
//右侧箭头点击函数
function next(){
//先清除定时器
clearInterval(timer);
//切换下一张
lbt();
//重新设定定时器，恢复轮播效果
timer = setInterval(lbt,3000);
}
//左侧箭头点击函数
function zuo(){
//先清除定时器
clearInterval(timer);
//切换上一张
zuolbt();
//重新设定定时器，恢复轮播效果
timer = setInterval(lbt,3000);
}
</script>
</body>
</html>
扫一扫
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
