html+css+JavaScript图片之间的转换

最新推荐文章于 2024-10-31 14:08:05 发布

格林黄

最新推荐文章于 2024-10-31 14:08:05 发布

阅读量587

点赞数

CC 4.0 BY-SA版权

分类专栏： web前段css知识点汇总 web+css+JavaScript小实践

本文链接：https://blog.youkuaiyun.com/apity123/article/details/70336425

web前段css知识点汇总同时被 2 个专栏收录

5 篇文章

订阅专栏

web+css+JavaScript小实践

5 篇文章

订阅专栏

本文介绍了一个简单的图片轮播及导航实现方案，通过HTML、CSS和JavaScript完成页面布局、样式设计以及交互逻辑。该方案利用鼠标悬停事件实现图片预览效果，并采用定时器自动切换图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="Css/marquee.css" />
</head>

<body>
    <div id="headimg">
    	<img id="placeholder" src="image/Fashion pictures/Fashion1.jpg" />
        <div id="nav">
            <ul id="navList">
                <li class=""><a href="image/Fashion pictures/Fashion1.jpg" title="fashion" onmouseover="showPic(this);return false;">1</a></li>
                <li class=""><a href="image/Cute pictures/Cute1.jpg" title="cute" onmouseover="showPic(this);return false;">2</a></li>
                <li class=""><a href="image/Fashion pictures/Fashion3.jpg" title="cute" onmouseover="showPic(this);return false;">3</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="Js/showPic.js"></script>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */
*
{
	padding:0px;
	margin:0px;
}
#headimg
{
	position:relative;
}
#nav
{
	position:absolute;
	top:280px;
}
#navList li
{
	width:25px;
	float:left;
	list-style-type:none;
}
a
{
	width:20%;
	font-size:20px;
	color:#FFF;
	background-color:#3FF;
	text-decoration:none;
	border-radius:30px;
}

JavaScript

// JavaScript Document
function showPic(whichpic)
{
	var source =whichpic.getAttribute("href");
	var placeholder=document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
}
var Index=0;
var time=3000;
var arr=new Array();
arr[0]="image/Fashion pictures/Fashion1.jpg";
arr[1]="image/Cute pictures/Cute1.jpg";
arr[2]="image/Fashion pictures/Fashion3.jpg"
setInterval(changeImg,time);
function changeImg()
{
	var obj=document.getElementById("placeholder");
	if(Index==arr.length-1)
	{
		Index=0;
	}
	else
	{
		Index+=1;
	}
	placeholder.src=arr[Index];
}