js练手小项目——javaScript实现图片轮播

JIAY_WX

已于 2022-07-13 18:18:26 修改

阅读量334

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-07-13 18:16:35 首次发布

本文链接：https://blog.csdn.net/JIAY_WX/article/details/125769799

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="new_file2.css">
		 
	</head>
	<body>
		
		<div class="slideshow-container">
		  <div onclick="show(1)"></div>
		  <div class="mySlides fade">
		    <div class="numbertext">1 / 3</div>
		    <img src="./asset/img1.jpg" style="width:100%">
		    <div class="text">文本 1</div>
		  </div>
		 
		  <div class="mySlides fade">
		    <div class="numbertext">2 / 3</div>
		    <img src="./asset/2.jpg" style="width:100%">
		    <div class="text">文本 2</div>
		  </div>
		 
		  <div class="mySlides fade">
		    <div class="numbertext">3 / 3</div>
		    <img src="./asset/3.jpg" style="width:100%">
		    <div class="text">文本 3</div>
		  </div>
		 
		  <a class="prev" onclick="plusSlides(-1)">❮</a>
		  <a class="next" onclick="plusSlides(1)">❯</a>
		</div>
		<br>
		<br>
		 
		<div style="text-align:center">
		  <span class="dot" onclick="currentSlide(1)"></span> 
		  <span class="dot" onclick="currentSlide(2)"></span> 
		  <span class="dot" onclick="currentSlide(3)"></span> 
		</div>
		<script src="new_file.js"></script>
	</body>
</html>

.body{
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.mySlides{
	display: none;
	/* max-width: 1000px;
	position: absolute; */
}
.fade{
	animation-name: fade;
	animation-duration: 0.6s;
}
@keyframes fade{
	from{opacity: 0.4;}
	to{opacity: 1.0;}
}
.numbertext{
	position: absolute;
	top: 15px;
	left: 10px;
	color: white;
}
.text{
	color: #f2f2f2;
	ont-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	
}
.prev,.next{
	cursor: pointer;
	color: #f2f2f2;
	font-size: 15px;
	width: auto;
    padding: 8px 12px;
	position: absolute;
	top: 50%;
	font-weight: bold;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
}
.next{
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
	background-color:rgba(0,0,0,0.8);
}
.slideshow-container {
  max-width: 100%;
  position: relative;
}

.dot{
	
	cursor: pointer;
	height: 13px;
	width: 13px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dot:hover,.active{
	background-color: black;
}

var slide=2;
showSlide(slide);

//自动加页
function plusSlides(s){
	showSlide(slide+=s);
}
//切换到指定页
function currentSlide(s){
	showSlide(slide=s);
}
//展示页面
function showSlide(s){
	var i;
	var dot=document.getElementsByClassName("dot");
	var slides=document.getElementsByClassName("mySlides");
	if(s>slides.length){
		slide=1;
	}
	if(s<=0){
		slide=slides.length
	}
	for (i = 0; i < slides.length; i++) {
	      slides[i].style.display = "none"; 
    }
    for(i=0;i<dot.length;i++){
		dot[i].className = dot[i].className.replace(" active", "");
	}
	slides[slide-1].style.display ="block";
	dot[slide-1].className += " active";
}
function show(s){
	s.style.display ="block";
}

结果：