CSS+JS ————实现简单的轮播图效果_css+js轮播图过渡粒子效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43824791/article/details/102956845

效果可能不是太好

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type= "text/css">
		#top_img{
			width: 500px;
			height:400px;
			margin: 0 auto;
			border:1px solid black;
			background-size:500px 400px;

			transition:background-image 0.8s ease-in-out;/* 设置过渡效果*/
			position: relative;
			top:0;
			left: 0;
		}
		ul{
			position:absolute;
			bottom:0;

		}
		li{
			float: left;
			width: 10px;
			height: 10px;
			margin-left:10px;
			list-style-type: none;
		}
		.d{
			width:10px;
			height: 10px;
			border-radius:5px;
			background:#fff;
		}
	</style>
</head>
<body>
	<div id = "top_img">
		<ul >
			<li class = "li"><div class = "d"></div> </li>
			<li class = "li"> <div class = "d"></div></li>
			<li class = "li"> <div class = "d"></div></li>
			<li class = "li"> <div class = "d"></div></li>
		</ul>
	</div>
<script type="text/javascript" >
	
	
    	
    	var imgPath = new Array("0039.jpg", "0040.jpg", "0041.jpg", "0042.jpg");// 图片路径数组

    	
    	var top_img = $("top_img");
    	var len = imgPath.length;

    	var now = len-1, last = 0;// now 表示本次小点的序号 last 表示上一个图片的小点
    	


    	function getLast(now){//获取last
    		return ((now-1)%len+len)%len;
    	}

    	function $(id){// 通过id  获取对象的函数
    		return document.getElementById(id);
    	}

    	function changeImage(){
    		now++;
    		if(now >= len)now = 0;
    		top_img.style.backgroundImage = "url("+imgPath[now]+")"; // 改变图片

    		last = getLast(now);
    		document.getElementsByClassName("d")[last].style.backgroundColor = "#fff";// 取消上一个小点的红色
    		document.getElementsByClassName("d")[now].style.background = "red";// 设置本次小点为红色

    	}

    	var interval1 = window.setInterval("changeImage()", 2000); // 每过两秒调用 函数
	
</script>
</body>

</html>