JavaScript DOM——【小案例】图片切换

最新推荐文章于 2022-02-15 22:19:44 发布

喋喋小菜鸡

最新推荐文章于 2022-02-15 22:19:44 发布

阅读量270

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/DebbyOctober/article/details/108213147

版权

这篇博客分享了如何使用JavaScript实现一个简单的图片切换效果，适合七夕节这样的特殊日子给另一半展示。代码中还包含了一个小彩蛋，提醒大家在晒七夕礼物时要注意避免晒出对象，以免造成不必要的误会。

摘要由CSDN通过智能技术生成

今天七夕节，大家都给女朋友准备的什么礼物？🎁

图片切换的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			 *{
   margin:0;padding:0}
			#container{
   
				width:790px;
				height:340px;
				margin:50px auto;
				overflow: hidden;
				position: relative;
			}
			ul,ol{
   
				list-style: none;
			}
			ul li{
   
				float:left;
				width:790px;
				height: 340px;
			}
			#container div{
   
				width:30px;
				height: 60px; 
				background: #CCC;
				opacity: 0.5;
				line-height: 60px;
				position: absolute;
				top:140px;
				color:#fff; 
				font-size: 30px;
				text-align: center;
				display: none;
			}
			#left{
   
				left:0px;

最低0.47元/天解锁文章

喋喋小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM——【小案例】图片切换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0;padding:0} #container{ width:790px; height:340px; margin:50px auto; overflow: hidden; positi
复制链接

扫一扫