<html>
<head>
<title>图片自动切换</title>
<style>
/* 设置图片样式 */
#img {
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" id="img">
</div>
<script>
var num = 1;
/* 定时器，每过2秒切换一次图片 */
setInterval(function () {
num++;
if (num == 4) {
num = 1;
}
document.getElementById("img").src = num + ".jpg";
},2000);
</script>
</body>
</html>
在上述代码中，我们通过设置一个定时器，每隔2秒钟切换一次图片。其中，通过JavaScript代码实现对图片属性(src)的修改，来实现图片的切换。CSS样式部分，我们通过id选择器来设置了图片的样式，包括宽度、高度和边框。
需要注意的是，上述代码中图片的位置应该与html文件在同一目录下。如果不在同一目录下，则应修改图片的路径。
总结
使用定时器可以方便地实现网页图片的自动切换。同时，CSS技术也可以用来为图片设置样式，让图片更加美观。在设计网页时，合理运用HTML、CSS和JavaScript技术，可以实现更加丰富和动态的效果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
