实现图片自动播放与左右箭头进行一个图片的播放

最新推荐文章于 2024-04-30 17:28:38 发布

张2公子

最新推荐文章于 2024-04-30 17:28:38 发布

阅读量742

点赞数 4

分类专栏：每日一个小进步大学冲！！！文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/zhang2gongzi/article/details/124759552

版权

每日一个小进步同时被 2 个专栏收录

35 篇文章 7 订阅

订阅专栏

大学冲！！！

33 篇文章 5 订阅

订阅专栏

-----20220514
前端作业

需求部分

我们要求将html，css，js进行结合
实现图片自动切换，具有淡出显示，淡出消失的功能，并且可以通过左右标签或左下角的圆圈来进行一个图片的转换

效果图

轮播图实现效果

js代码解释

首先通过getElementsByClassName的方法，将文档中所有指定类名的元素集合作为 NodeList 对象。然后通过getElementByID，返回对拥有指定 ID 的第一个对象的引用，就这样引用左右标签。
之后通过清除class，为我们定义的参数items，circles加指定的属性，并为其赋指定的值
开始定时器的方法为摁右边的按钮，其他的部分代码上有注释，较为清楚

源码部分

js部分

window.onload=function(){
    var items=document.getElementsByClassName("item");
    //getElementsByClassName() 方法返回文档中所有指定类名的元素集合
    //作为 NodeList 对象。
    //NodeList 对象代表一个有顺序的节点列表。NodeList 对象 
    //我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
    var circles=document.getElementsByClassName("circle");
    var leftBtn=document.getElementById("btn-left");
    //可返回对拥有指定 ID 的第一个对象的引用。
    var rightBtn=document.getElementById("btn-right");
    var content=document.querySelector('.contect');
    //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
    var index=0;
    var timer=null;
    //清除class
    var clearclass=function(){
        for(let i=0;i<items.length;i++){
            items[i].className="item";
            circles[i].className="circle";
            circles[i].setAttribute("num",i);
            //添加指定的属性，并为其赋指定的值
        }
    }
    /*只显示一个class*/
    function move(){
        clearclass();
        items[index].className="item active";
        circles[index].className="circle white";
    }
    //点击右边按钮切换下一张图片
    rightBtn.onclick=function(){
        if(index<items.length-1){
            index++;
        }
        else{
            index=0;
        }
        move();
    }
    //点击左边按钮切换上一张图片
    leftBtn.onclick=function(){
        if(index<items.length){
            index--;
        }
        else{
            index=items.length-1;
        }
        move();
    }
    //开始定时器，点击右边按钮，实现轮播
    timer=setInterval(function(){
        rightBtn.onclick();
    },3000)
    //点击圆点时，跳转到对应图片
    for(var i=0;i<circles.length;i++){
        circles[i].addEventListener("click",function(){
            var point_index=this.getAttribute("num");
            index=point_index;
            move();
        })
    }
    //鼠标移入清除定时器，并开启一个定时器，使慢慢转动
    content.onmouseover=function(){
        clearInterval(timer);
        //clearInterval() 方法可取消由 setInterval() 设置的 timeout。
        //clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
            timer=setInterval(function(){
                rightBtn.onclick();
            },60000)
    }
    //鼠标移出又开启定时器
    content.onmouseleave=function(){
        clearInterval(timer);
        timer=setInterval(function(){
            rightBtn.onclick();
        },3000)
    }
    }

css部分

*{
    margin: 0;
    padding: 0;
}
body{
    color: rgb(103, 57, 41);
}
.container{
    width: 1010px;
    margin: 0 auto;
    background-color: #aaa;
}
.header{
    width: 1000px;
    height: 250px;
    margin: 5px;
    background-color: #123;
    position: relative;
}
#item.a{
	list-style: none;
}
#item.li{
	list-style: none;
}
#item{
	width: 100%;
	height: 100%;
	
}
.item{
	position: absolute;
	opacity: 0;
	transition: all 1s;
	
}
.item.active{
	opacity:1;
}
img{
	width: 950px;
    height: 250px;
}
#btn-left{
	width: 30px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left:5px;
	z-index: 10;/*始终显示在图片的上层*/
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
	cursor: pointer;
	opacity: 0;/*平时隐藏*/
}
.container:hover #btn-left{
	/*鼠标滑入，显示图标*/
	opacity: 1;
}

#btn-right{
	width: 26px;
	height: 69px;
	font-size: 30px;
	color: white;
	background-color:rgba(0,0,0,0.4);
	line-height: 69px;
	padding-left: 5px;
	z-index: 10;
	position: absolute;
	right: 0;
	top: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-60%);
}
.container:hover #btn-right{
	opacity: 1;
}
#circle{
	height: 20px;
	display: flex;
	position: absolute;
	bottom: 35px;
	right: 25px;
}
.circle{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	border: 2px solid white;
	background: rgba(0,0,0,0.4);
	cursor: pointer;
	margin: 5px;
}
.white{
	background-color: #FFFFFF;
}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>咖啡店</title>
	<link rel="stylesheet" href="caffe.css">
    <script src="caffe.js"></script>
</head>
<body>
	<div class="container">
		<!-- 头部 -->
		<div class="header">
			<ul id="item">
				<li class="item">
					<a href="#"><img src="banner.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="banner1.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="banner2.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="banner3.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="banner4.jpg" ></a>
				</li>
			</ul>
			<div id="btn-left"><</div>
			<div id="btn-right">></div>
			<ul id="circle">
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
			</ul>
		</div>
		</body>
</html>

张2公子

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
实现图片自动播放与左右箭头进行一个图片的播放

-----20220514前端作业需求部分我们要求将html，css，js进行结合实现图片自动切换，具有淡出显示，淡出消失的功能，并且可以通过左右标签或左下角的圆圈来进行一个图片的转换效果图轮播图实现效果 js代码解释首先通过getElementsByClassName的方法，将文档中所有指定类名的元素集合作为 NodeList 对象。然后通过getElementByID
复制链接

扫一扫