文章目录
通过透明度实现轮播图
1.思路
先将所有图片通过position：absolute 来重叠在一起
将所有图片的透明度设为0
给第一个轮播图添加一个单独的属性 用来设置透明度为1
本代码通过 active来代表当前图片，添加opacity为1 的属性
自动轮播：开启定时器，可以在定时器里面直接用右键点击函数
当前图片添加active属性，其他图片无该属性
小圆点：先获取图片的索引，达到点击小圆点可以获取所对应图片的索引 再添加active属性
在点击小圆点和按钮之前要先清除定时器，不然在点击时会触发多个定时器，导致快速移动，在点击之后还要恢复定时器
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.lunbo{
width: 100%;
height: 100vh;
}
.content{
width: 100%;
height: 100vh;
position: relative;
}
#item{
width: 100%;
height: 100vh;
}
.item{
position: absolute;
width: 100%;
height: 100vh;
opacity: 0;
transition: all 2s;
}
.item.active{
opacity: 1;
}
.item img{
width: 100%;
height: 100%;
}
#btn-left,#btn-right{
width: 50px;
height: 50px;
position: absolute;
}
#btn-left{
left: 10px;
top: 50%;
opacity: 0.5;
}
#btn-right{
right:10px;
top: 50%;
opacity: 0.5;
}
#circle{
height: 20px;
width: 100px;
display: flex;
position: absolute;
bottom: 100px;
left: 45%;
}
.circle{
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #666666;
margin: 0 5px;
}
.circle.active{
background-color: burlywood;
}
</style>
<script type="text/javascript">
window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftbtn=document.getElementById("btn-left");
var rightbtn=document.getElementById("btn-right");
var content=document.querySelector(".content");
var index=0;
var timer;
var t;
//清除所有属性
var clearActive=function(){
for(var i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
}
}
//改变Active方法
var goindex=function(){
items[index].className="item active";
circles[index].className="circle active";
}
function timer(){
t=setInterval(function(){
if(index==items.length-1){
index=0;
clearActive();
goindex();
}else{
index++;
clearActive();
goindex();
}
},2000);
}
timer();
leftbtn.onclick=function(){
clearInterval(t);
if(index==0){
index=items.length-1;
clearActive();
goindex();
timer();
}else{
index--;
clearActive();
goindex();
timer();
}
}
rightbtn.onclick=function(){
clearInterval(t);
if(index==items.length-1){
index=0;
clearActive();
goindex();
timer();
}else{
index++;
clearActive();
goindex();
timer();
}
}
//为每一个绑定单击响应函数
for(var i=0;i<circles.length;i++){
circles[i].num=i;
circles[i].onclick=function(){
clearInterval(t);
index=this.num;
clearActive();
goindex();
timer();
}
}
leftbtn.onmouseenter=function(event){
leftbtn.style.opacity=1;
};
rightbtn.onmouseenter=function(event){
rightbtn.style.opacity=1;
};
leftbtn.onmouseleave=function(event){
leftbtn.style.opacity=0.5;
};
rightbtn.onmouseleave=function(event){
rightbtn.style.opacity=0.5;
};
}
</script>
</head>
<body>
<div class="lunbo">
<div class="content">
<div id="item">
<div class="item active"><img src="tsinghua/img/nie.jpg" /></div>
<div class="item"><img src="tsinghua/img/wang.jpg"/></div>
<div class="item"><img src="tsinghua/img/zhang.jpg"/></div>
</div>
<div id="btn-left">
<img src="tsinghua/img/prev53_2.png"/>
</div>
<div id="btn-right">
<img src="tsinghua/img/next53_2.png"/>
</div>
<div id="circle">
<div class="circle active"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
通过偏移量实现轮播图
1.思路
1）需要过渡效果
若有三张图片，则需要在第三张图片后再添加一张第一张图片，当到达第四张图片时让过渡效果为none，index为0 直接转换到第一张图片（需要用到延时调用）这样可以避免从最后一张，经过中间两张平滑回到第一张的bug
2) 不需要过渡效果
直接使用三张图片，不需要添加第四张，就可以直接简单实现一个轮播图
2.代码（带过渡）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.headlines {
height: 600px;
width: 660px;
background-color: white;
position: relative;
overflow: hidden;
}
#lunboList {
height: 800px;
width: 2640px;
display: flex;
position: absolute;
left: 0px;
}
#lunboList img {
width: 100%;
height: 100%;
transition: all 0.5s;
}
.news-img:hover img {
transform: scale(1.2);
}
.lunbo1 {
width: 659px;
height: 800px;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
}
.news-img {
width: 659px;
height: 450px;
overflow: hidden;
}
#zhiding {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding: 25px 0;
position: absolute;
bottom: 30px;
}
.headlines-dot {
width: 100px;
height: 20px;
display: flex;
}
.headlines-dot div {
width: 10px;
height: 10px;
background-color: #9d9d9d;
border-radius: 50%;
margin: 0 5px;
}
.dot:active {
background-color: #6510ad;
}
.media-next,.media-prev {
width: 66px;
height: 15px;
}
#zhiding img {
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<div class="headlines">
<!-- 大容器 -->
<div id="lunboList">
<div class="lunbo1">
<div class="news-img">
<img src="tsinghua/img/tsinghua-gate.jpg" />
</div>
</div>
<div class="lunbo1">
<div class="news-img">
<img src="tsinghua/img/anqunkexue.jpeg" />
</div>
</div>
<div class="lunbo1">
<div class="news-img">
<img src="tsinghua/img/shungjiantiao.jpeg" />
</div>
</div>
<div class="lunbo1">
<div class="news-img">
<img src="tsinghua/img/tsinghua-gate.jpg" />
</div>
</div>
</div>
<div id ="zhiding">
<div class="media-prev">
<img src="tsinghua/img/prev58.png"/>
</div>
<div class="headlines-dot">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div >
<div class="media-next">
<img src="tsinghua/img/next58.png"/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var headlines = document.getElementsByClassName("headlines")[0];
var zhiding = document.getElementById("zhiding");
var lunboArr = document.getElementsByClassName("lunbo1");
var lunboList = document.getElementById("lunboList");
var dots = document.getElementsByClassName("dot");
var mediaPrev = document.querySelector(".media-prev");
var mediaNext = document.querySelector(".media-next");
var index2 = 0;
var t2;
dots[index2].style.backgroundColor = "#6510ad";
mediaNext.onclick = function() {
clearInterval(t2);
lunboList.style.transition = "0.5s";
index2++;
lunboList.style.left = -660 * index2 + "px";
if (index2 >= 3) {
index2 = 0;
setTimeout(function() {
lunboList.style.transition = "none";
lunboList.style.left = -660 * index2 + "px";
}, 500);
}
for (var i = 0; i < lunboArr.length - 1; i++) {
dots[i].style.backgroundColor = "#9d9d9d";
}
dots[index2].style.backgroundColor = "#6510ad";
timer2();
}
mediaPrev.onclick = function() {
clearInterval(t2);
lunboList.style.transition = "0.5s";
index2--;
lunboList.style.left = -660 * index2 + "px";
if (index2 <= 0) {
index2 = 3;
for (var i = 0; i < lunboArr.length - 1; i++) {
dots[i].style.backgroundColor = "#9d9d9d";
}
dots[0].style.backgroundColor = "#6510ad";
setTimeout(function() {
lunboList.style.transition = "none";
lunboList.style.left = -660 * index2 + "px";
}, 500);
timer2();
} else {
for (var i = 0; i < lunboArr.length - 1; i++) {
dots[i].style.backgroundColor = "#9d9d9d";
}
dots[index2].style.backgroundColor = "#6510ad";
timer2();
}
}
//为每个按钮绑定函数
for (var i = 0; i < lunboArr.length - 1; i++) {
dots[i].num = i;
lunboList.style.transition = "0.5s";
dots[i].onclick = function() {
clearInterval(t2);
index2 = this.num;
lunboList.style.left = -660 * index2 + "px";
for (var j = 0; j < lunboArr.length - 1; j++) {
dots[j].style.backgroundColor = "#9d9d9d";
}
dots[index2].style.backgroundColor = "#6510ad";
timer2();
}
}
//自动播放
timer2();
function timer2() {
t2 = setInterval(function() {
mediaNext.onclick();
}, 2000)
}
</script>
</html>
延时调用
延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次
延时和定时的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上可以互相代替的，在开发中可以根据自己需要去选择
1）setTimeout
2）clearTimeout（）来关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function()
{
//使图片自动切换
var i=0;
var btn01=document.getElementById("btn01");
var img1=document.getElementById("img1");
var imgArr=["img/01.png","img/02.jpg","img/03.jpg","img/04.jpg"];
var timer;
btn01.onclick=function(){
//每点一次按钮，就会开启一个定时器
//点击多次就会开启多个定时器，这就导致图片的切换速度过快
//并且我们只能关闭最后一次开启的定时器
//在开启定时器前 应将前一个定时器关闭
clearInterval(timer);
timer=setInterval(function(){
img1.src=imgArr[i];
i++;
i=i%imgArr.length;
},500);
}
var btn02=document.getElementById("btn02");
btn02.onclick=function()
{
clearInterval(timer);
}
}
</script>
</head>
<body>
<img src="img/01.png" id="img1" height="100px" width="100px"/>
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
</body>
</html>
本周总结
通过本周的学习，初步了解了轮播图的两种实现方式，在实现过程中也遇到了许多问题，比如找到对应图片索引，如何更好的实现过渡效果，以及逻辑的错误。同时也更好的理解掌握js。
这一周加班加点才勉强写完这次页面，同时也给自己腾出了一天的时间，去郑州通宵玩了一把。密室，烤肉，ktv。元旦前也是痛快的玩了一次，想想就很爽。但是回来就补了半天的觉，好久没玩这么爽了
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
