轮播图

最新推荐文章于 2024-10-11 17:39:47 发布

泡椒小竹孙

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/m0_37834170/article/details/104527264

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

html代码页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片轮换</title>
		<link rel="stylesheet" type="text/css" href="css/图片轮换.css"/>
		<script src="js/图片轮换.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body onload="show()">
		<!-- alt:指图片加载失败时候，显示出来 -->
		<img id="img1" src="img/a.png" alt="图片正在加载中...">
		<ul>
			<li onmouseover="show1(this)">1</li>
			<li onmouseover="show1(this)">2</li>
			<li onmouseover="show1(this)">3</li>
		</ul>
	</body>
</html>

js代码块

var a;

function show(){
// 要显示的图片的索引
var i=0;
// 页面加载的时候,
changeImage(i)
			
}
//2. 鼠标经过切换页面
function show1(ob){
	// 当前选中的li的数字文本
	var num=parseInt(ob.innerHTML);
	
	// 先清除定时器 切换图片的效果
	clearInterval(a);
	// 重新启动定时器切换图片的功能
	changeImage(num-1);
}
// 3.图片切换:(实现定时器切换图片的方法)
// eg:鼠标经过第二种图片,开始从第二张图片轮播
function changeImage(i){
	// 声明一个定时器，每隔1s切换一次
	a=setInterval(function(){
		// 切换图片
		document.getElementById("img1").src=arr1[i];
		// 切换数字图标
		
		// 获得所有的li,将所有的li边框变为默认颜色
		var lis=document.getElementsByTagName("li");
		for (var j = 0; j < lis.length; j++) {
			lis[j].style.backgroundColor="orange";
		}
		// 将图片对应的li变为红色
		document.getElementsByTagName("li")[i].style.backgroundColor="red";
		i++
		// 4.如果图片显示到最后一张，那么需要从头开始
		if(i==arr1.length){
			i=0;
		}				
	},1000);
}

css代码块

body,html{
	height: 100%;
	width: 100%;
}
*{
	margin: 0px;
	padding: 0px;
}
ul{
	position: fixed;
	z-index: 1;
	margin-left: 1000px;
	top: 265px;
}
body{
	width: 1200px;
	height: 300px;
	margin: 0px auto;
}
#img1{
	width: 1200px;
	height: 300px;
	
}
ul li{
	width: 30px;
	height: 30px;
	/* 行高 */
	line-height: 30px;
	background-color: orange;
	border: 1px solid forestgreen;
	float: left;
	margin-right: 5px;
	list-style: none;
	text-align: center;
	
}