Javascript实现图片轮换功能方式二

大大源码 • 2023年3月7日 am12:30 • 未分类

关注重工黑大帅，学习不迷路

先看效果：
在这里插入图片描述

图片素材下载（后面两种图片轮换素材也是这个）：

链接：

https://pan.baidu.com/s/1EnQkPvp80sqtD0IbANj9sA

提取码：

m7t3

public.css:

/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
ul,li,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
img{
	border: 0;
}
.clears{
	clear: both;
	height: 0;
	line-height: 0;
	overflow: hidden;
	font-size: 0;
}

body{
	font-family: Arial,Verdana,"Microsoft Yahei","simsun";
	font-size: 14px;
}

style.css:

/* CSS Document */
.picshow{
	width: 700px;
	height: 450px;
	margin-left: auto;
	margin-right: auto;
}
.bigimg{
	width: 700px;
	height: 400px;
	overflow: hidden;  /*把超出的图片隐藏*/
	position: relative;
}
.imgUl{
	transition: all 0.5s; 
}
.imgUl>li{
	width: 700px;
	height: 400px;
	overflow: hidden;  /*内容超出隐藏，防止空隙*/
	position: absolute;
	display: none;
}
.imgUl .show{
	display: block;
	animation: ani 0.5s both;
}

.control{
	width: 700px;
	height: 50px;
	background: #eee;
	text-align: right;
}
.control  a{
	width: 30px;
	height: 30px;
	background: #666;
	display: inline-block;
	margin-top:10px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 30px;
	color: #fff; 
}
.control  .current{
	background: #f30;
}

@keyframes ani{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

pic.js:


// JavaScript Document
var ctrl = document.getElementById("ctrl");
var imgUl = document.getElementById("imgUl");
// var  a = ctrl.children;
var a = ctrl.getElementsByTagName("a");
var li = imgUl.children;
    li[0].className = "show";
for(var i = 0 ; i <= a.length-1 ; i++){
	// 【关键】标签存储当前的索引值
	 
	a[i].onmouseover = function(){
		// console.info("OK");
		// 把所有的标签，都变成普通样子。
		allElements();
		this.className = "current";  //  突出当前标签
		
		 var index = this.getAttribute("index");
		// 找到对应的图片 li
		li[index].className = "show";
	}
}

//  操作所有标签复原。
function  allElements(){
	for(var k=0 ; k <= a.length-1 ; k++){
		a[k].className = "";  // 去掉类，复原
		li[k].className = "";
	}
}

index.html:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<!-- 图片轮播 -->
<div class="picshow">
	<!-- 大图 -->
	<div class="bigimg">
		<ul class="imgUl"  id="imgUl">
			<li><a href="#"><img src="images/pic1.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/pic2.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/pic3.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/pic4.jpg" alt=""></a></li>
			<li><a href="#"><img src="images/pic5.jpg" alt=""></a></li>
		</ul>
	</div>
	<!-- 大图 end -->
	
	<!-- 控制块 -->
	<div class="control"  id="ctrl">
		<a href="javascript:void(0)" index="0"  class="current"></a>
		<a href="javascript:void(0)" index="1"></a>
		<a href="javascript:void(0)" index="2"></a>
		<a href="javascript:void(0)" index="3"></a>
		<a href="javascript:void(0)" index="4"></a>
	</div>
	<!-- 控制块 end --> 
</div>
<!-- 图片轮播 end -->
<script src="js/pic.js"></script>
</body>
</html>

您的点赞和关注是我学习的强大动力之一

原文链接：https://blog.csdn.net/H_W_1212/article/details/110477860

THE END

Dijkstra实现（邻接表C++版）

< <上一篇

Go函数使用注意事项总结（逃逸分析、匿名函数、闭包函数）

下一篇>>

大大搜源码

搜索内容

Javascript实现图片轮换功能方式二

关注重工黑大帅，学习不迷路

您的点赞和关注是我学习的强大动力之一