轮播图html+css+js

长野：D

已于 2023-02-23 15:02:20 修改

阅读量109

点赞数

文章标签： html

于 2023-02-23 14:33:28 首次发布

本文链接：https://blog.csdn.net/nassiy/article/details/129181224

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
		    * {
		        margin: 0;
		        padding: 0;
		    } 
		    .wrap {
		        width: 500px;
		        height: 280px;
		        margin: 100px auto;
		        perspective: 500px;
		        position: relative;
		    }
		    #wrap-ul {
		        width: 500px;
		        height: 280px;
		        list-style: none;
		        position: relative;
		    }
		
		   .wrap img {
		        /* border-radius: 15%; 
		        这里可以修改图片的大小，最好改的时候把ul和li的一并改为相同的*/
		        transition: all 1s ease 0s;
		        width: 500px;
		        height: 280px;
		        display: inline-block;
		        opacity: 0;
		    }
		    .cc img {
		        opacity: 1;
		    }
		
		    #wrap-ul li {
		        width: 500px;
		        height: 280px;
		        position: absolute;
		        left: 0;
		        top: 0;
		    }
		
		    .wrap span {
		        width: 40px;
		        height: 70px;
		        background-color:black;
		        color: white;
		        text-align: center;
		        font-size: 50px;
		        position: absolute;
		        left: -60px;
		        top: 40%;
		        z-index: 11;
		        cursor: pointer;
		        opacity: .4;
		        transition: all 0.5s ease 0s;
		    }
		
		    .wrap span:hover {
		
		        opacity: 1;
		    }
		
		    .wrap #right-btn1 {
		        right: -60px;
		        left: auto;
		    }
			#pointlist{
				list-style: none;
				padding-left: 0px;
				position: absolute;
				right: 190px;
				bottom: 20px;
				z-index: 200;
			}
			#pointlist li{
			    width: 10px;
			    height: 10px;
			    background-color: #fff;
			    border-radius: 100%;
			    float: left;
			    margin-right: 8px;
			    cursor: pointer;  
			}
			#pointlist li:hover{
				background-color: #c5c5c5;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
		    <ul id="wrap-ul">
		        <li class="b1"><img src="./img/1.jpg" alt=""></li>
		        <li class="b1"><img src="./img/2.jpg" alt=""></li>
		        <li class="cc"><img src="./img/3.jpg" alt=""></li>
		        <li class="b1"><img src="./img/4.jpg" alt=""></li>
		        <li class="b1"><img src="./img/5.jpg" alt=""></li>
				<li class="b1"><img src="./img/6.jpg" alt=""></li>
		    </ul>
		    <span id="toleft1">&lt;</span>
		    <span id="right-btn1">&gt;</span>
		</div>
	</body>
	<script>
		window.onload = () =>{
			var lb =document.querySelector("#toleft1");
			var rb =document.querySelector("#right-btn1");
			var ul =document.querySelector("#wrap-ul");
			var img=document.querySelector('img');
			var lis=ul.getElementsByTagName("li");
			var classes=["b1","b1","cc","b1","b1","b1"];
			
			function toright(){
				var last_class=classes.pop();
				classes.unshift(last_class);
				for(var i=0; i<lis.length; i++){
					lis[i].className=classes[i]; 
				}
			}
			function toleft1(){
				var first_class=classes.shift();
				classes.push(first_class);
				for(var i=0; i<lis.length; i++){
					lis[i].className=classes[i];
				}
			}
			rb.onclick=toright;
			lb.onclick=toleft1;
			
			//定时器
			timer=setInterval(toright,3000);
			ul.onmouseover=function(){
				clearInterval(timer);
				timer=null;
			}
			ul.onmouseleave=()=>{
				timer=setInterval(toright,3000);
			}
		}
	</script>
</html>