JS之实现简单的图片轮播

复制即可使用

1:代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单的图片轮播</title>
		<style type="text/css">
			/*图片下数字的整体样式*/
			#myUl li {
				list-style-type: none;
				display: inline-block;
				font-size: 24px;
			}
			/*当前数字的单个样式*/
			.current {
				display: inline-block;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				text-align: center;
				border: 2px dotted red;
			}
			/*轮播图片的样式*/
			img{
				width:500px;
				height:350px;
				border-radius: 6px;
				box-shadow:2px 3px 2px grey;
			}
		</style>

	</head>
	<body>
		<img alt="" src="img/1.jpg" id="myImg">
		<ul id="myUl">
			<li class="current" onclick="selectImg(event);">1</li>
			<li onclick="selectImg(event);">2</li>
			<li onclick="selectImg(event);">3</li>
			<li onclick="selectImg(event);">4</li>
			<li onclick="selectImg(event);">5</li>
			<li onclick="selectImg(event);">6</li>
			<li onclick="selectImg(event);">7</li>
			<li onclick="selectImg(event);">8</li>
		</ul>
		
	    <script type="text/javascript">
			    // 1、周期性的切换图片,会有个指示器来指明当前是第几个图片
				var currentIndex = 0;//当前图片指示器
				var myImg = document.getElementById("myImg");
				var lis = document.getElementsByTagName("li");
				var intervalID;
				var imgs = [ "1.jpg", "2.jpg", "3.jpg","4.jpg", "5.jpg","6.jpg", "7.jpg", "8.jpg"];
				
				function chgImg() {
					currentIndex = (++currentIndex) % imgs.length;
					//切换图片
					 myImg.src = "img/" + imgs[currentIndex];
					//修改指示器的样式,在设置之前我们需要清空已有样式为默认。
					chgInditor();
				}
				
				intervalID = setInterval(chgImg, 2000);
				
				//2、当鼠标移动到图片上时,停止周期性切换图片
				myImg.onmouseover = function() {
					clearInterval(intervalID);
				}
				
				//3、当鼠标移开时,继续切换图片
				myImg.onmouseout = function() {
					intervalID = setInterval(chgImg, 2000);
				}
				
				//4、当单击某个图片时,直接切换到那张图片
//				for (var j = 0; j < lis.length; j++) {
//					lis[j].onclick = function(event) {
//						currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
//						myImg.src = "img/" + imgs[currentIndex];
//						chgInditor();
//					}
//				}
				
				//添加1,2,3,4,5,6,7,8的点击事件
				function selectImg(event){
					currentIndex = parseInt(event.target.innerHTML) - 1;//我希望从我单击的地方往下循环
					myImg.src = "img/" + imgs[currentIndex];
					chgInditor();
				}
				
				//添加1,2,3,4,5,6,7,8的边框样式
				function chgInditor() {
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = "";
					}
					lis[currentIndex].className = "current";
		
				}
				
		</script>

	</body>
</html>

 2:效果图

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML和CSS可以结合使用来实现一个简单图片轮播效果,这里提供一个基础的示例,不涉及JavaScript或jQuery等动态脚本。我们将创建一个包含几张图片的div容器,以及两个按钮来控制图片切换。 首先,你需要在HTML中创建基本结构: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .carousel { position: relative; width: 100%; overflow: hidden; } .carousel-item { position: absolute; width: 100%; opacity: 0; transition: opacity 1s ease; } .active { opacity: 1; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="carousel-item active" alt="Image 1"> <img src="image2.jpg" class="carousel-item" alt="Image 2"> <!-- 添加更多图片 --> </div> <button id="prev">上一张</button> <button id="next">下一张</button> </body> </html> ``` 接下来,添加一些基本的CSS样式,以及两个按钮的HTML和一些基本的点击事件(假设按钮的ID分别为`prev`和`next`): ```html <!-- 添加以下CSS到<head>部分上方 --> <style> /* ... (之前的样式) ... */ #prev, #next { position: absolute; bottom: 20px; cursor: pointer; } #prev { left: 20px; } #next { right: 20px; } /* 按钮样式 */ button { padding: 10px 20px; font-size: 16px; } </style> <!-- ... (之前的<body>部分) ... --> <button id="prev">上一张</button> <button id="next">下一张</button> <script> // 假设每张图片都有对应的索引 let currentIndex = 0; function changeSlide(direction) { const items = document.querySelectorAll('.carousel-item'); items.forEach((item, index) => { item.classList.remove('active'); }); const nextItem = direction === 'prev' ? currentIndex - 1 : currentIndex + 1; if (nextItem >= items.length) { nextItem = 0; // 循环处理 } if (nextItem < 0) { nextItem = items.length - 1; // 循环处理 } items[nextItem].classList.add('active'); currentIndex = nextItem; } document.getElementById('prev').addEventListener('click', () => changeSlide('prev')); document.getElementById('next').addEventListener('click', () => changeSlide('next')); </script> ``` 这个例子中的图片轮播是静态的,如果你想添加真正的轮播功能,可以考虑使用JavaScript库如Swiper.js或者使用纯JavaScript结合`requestAnimationFrame`实现动画。如果你对使用这些库感兴趣,我可以为你提供相关的引导。现在,请问: 1. 这种静态图片轮播能满足你的需求吗? 2. 有没有兴趣了解如何添加轮播动画效果? 3. 如果你希望用JavaScript实现,还需要什么方面的帮助?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值