原生js实现轮播图（用位移和透明度两种方法）

学徒在修行

已于 2022-10-19 23:02:22 修改

阅读量304

点赞数 3

文章标签： javascript 前端 html

于 2022-09-26 21:14:30 首次发布

本文链接：https://blog.csdn.net/m0_53394907/article/details/127061140

版权

原生js实现轮播图

1效果：（每5秒自动换到下一个，可点击换图，通过位移实现轮播)

在这里插入图片描述

2源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.box{
				height: 320px;
				margin: 50px auto ;
				overflow: hidden;
				width: 690px;
				position: relative;
				border: 5px green solid;
			}
			.box ul{
					width: 7000px;
					position: absolute;
			}
			.box ul li{
				width: 690px;
	            display: inline-block;
			  
			}
			.box img{
				width: 690px;
				height: 320px;
			}
			#daohan{
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
			#daohan a{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: inline-block;
				background-color:black;
				text-decoration: none;
				color: white;
				font-size: 15px;
				text-align: center;	
				opacity: 0.5;
				position: relative;
				
						}
			#daohan a span{
				vertical-align: middle;
			}
		</style>
	
		<script>
			
			window.onload=function(){
				var ulwidth=document.getElementById("one");
				var imglist=ulwidth.getElementsByTagName("img");
				var box=document.getElementsByClassName("box")[0];
				var alla=box.getElementsByTagName("a");
				// var timer;
				var index=null;
				auto();
				for(var i=0;i<alla.length;i++){
					alla[i].num=i;
					alla[i].onclick=function(){
					index=this.num;	
					
					// ulwidth.style.left=(-705)*index+"px";打开会使得move()无效;
					
					move(ulwidth,"left",-695*index,5000,function(){
						setA();
					});
					}
				}
				function setA(){
					for(var i=0;i<alla.length;i++){
						alla[i].style.backgroundColor="black";
						alla[i].style.opacity=0.7;
						alla[i].style.color="white";
					}
					alla[index].style.backgroundColor="#ffffff";
					alla[index].style.color="#000000";
					alla[index].style.opacity=1;
				}
				function move(obj,attr,traget,speed,callback){
					clearInterval(obj.timer);
					var current=parseInt(getComputedStyle(obj,null)[attr]);
					if(current>traget){
						speed=-speed;
					}
					obj.timer=setInterval(function(){
						var oldvalue=parseInt(getComputedStyle(obj,null)[attr]);
						var newvalue=oldvalue+speed;
						if((speed<0&&newvalue<traget)||(speed>0&&newvalue>traget)){
							newvalue=traget;
						}
						obj.style[attr]=newvalue+"px";
						if(newvalue==traget){
							clearInterval(obj.timer);
							callback();
						}
					},30
					)
				}
	   function auto(){
		   setInterval(function(){
			   index++;
			   index%=9;
			   if(index==0){
				     ulwidth.style.left=0+"px";
				
			   }
			   move(ulwidth,"left",-695*index,5555,function(){
				   setA();
			   });
		   },5000);
	   }
			 }
		</script>
	</head>
	<body>
		<div class="box">
			<ul id="one">
				<li><img src="./2022zq2 (1).jpg" alt=""></li>
				<li><img src="./3.jpg" alt=""></li>
				<li><img src="./4.jpg" alt=""></li>
				<li><img src="./5.jpg" alt=""></li>
				<li><img src="./6.jpg" alt=""></li>
				<li><img src="./7.jpg" alt=""></li>
				<li><img src="./8.jpg" alt=""></li>
				<li><img src="./9.jpg" alt=""></li>
				<li><img src="./10.jpg" alt=""></li>
			</ul>
			<div id="daohan">
				<a href="#"><span>1</span></a>
				<a href="#"><span>2</span></a>
				<a href="#"><span>3</span></a>
				<a href="#"><span>4</span></a>
				<a href="#"><span>5</span></a>
				<a href="#"><span>6</span></a>
				<a href="#"><span>7</span></a>
				<a href="#"><span>8</span></a>
				<a href="#"><span>9</span></a>
			</div>
		</div>
	</body>
</html>

更新

二、另一种方法：

在这里插入图片描述

用透明度来实现：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图01</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;
        }
        .wrap #alla{
			position: absolute;
			bottom: 15px;
			right: 20px;
		}
		.wrap #alla a{
			display: inline-block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			margin-left: 10px;
			background-color: ghostwhite;
			text-align: center;
			text-decoration: none;
			font-size: 10px;
			color: aqua;
		}
		
    </style>
	<script type="text/javascript">
		window.onload=function(){
			let ul=document.getElementById("wrap-ul");
			let lis=ul.getElementsByTagName("li");
			let classes=["b1","b1","cc","b1","b1","b1"];
			let Rbut1=document.getElementById('right-btn1');
			let lbut1=document.getElementById("toleft1");
			let div=document.getElementById("alla");
			let alla=div.getElementsByTagName("a");
			let flag;
			for(let i=0;i<alla.length;i++){
				alla[i].index=i;
				alla[i].onclick=function(){
					for(let i=0;i<alla.length;i++){
						alla[i].style.backgroundColor="ghostwhite";
						alla[i].style.color="aqua";
					}
					this.style.backgroundColor="aqua";
					this.style.color="white";
					
					for(let i=0;i<lis.length;i++){
						lis[i].className="b1";
						
					}
					lis[this.index].className="cc";
				
				}
			}
			function toRight(){
				let lastli=classes.pop();
				classes.unshift(lastli);
				for(let i=0;i<lis.length;i++){
					lis[i].className=classes[i];
					if(classes[i]=="cc"){
						flag=i;
					}
				}
				for(let i=0;i<alla.length;i++){
					alla[i].style.backgroundColor="ghostwhite";
					alla[i].style.color="aqua";
				}
				alla[flag].style.backgroundColor="aqua";
				alla[flag].style.color="white";
			}
			function toLeft(){
				let firstli=classes.shift();
				classes.push(firstli);
				for(let i=0;i<lis.length;i++){
					lis[i].className=classes[i];
					if(classes[i]=="cc"){
						flag=i;
					}
				}
				for(let i=0;i<alla.length;i++){
					alla[i].style.backgroundColor="ghostwhite";
					alla[i].style.color="aqua";
				}
				alla[flag].style.backgroundColor="aqua";
				alla[flag].style.color="white";
			}
			let timer=setInterval(toRight,3000);
			Rbut1.onclick=toRight;
			lbut1.onclick=toLeft;
			// Rbut1.onclick=function(){
			// 	timer=null;
			// 	timer=setInterval(toRight(),1000);
			// }
			// lbut1.onclick()=function{
			// 	timer=null;
			// 	timer=setInterval(toLeft(),1000);
			// }
			ul.onmouseover=function(){
				clearInterval(timer);
				timer=null;
			}
			ul.onmouseleave=function(){
				timer=setInterval(toRight,3000);
			}
		}
		
	</script>
</head>

<body>
    <div class="wrap">
        <ul id="wrap-ul">
            <li class="b1"><img src="./3.jpg" alt=""></li>
            <li class="b1"><img src="./4.jpg" alt=""></li>
            <li class="cc"><img src="./5.jpg" alt=""></li>
            <li class="b1"><img src="./6.jpg" alt=""></li>
            <li class="b1"><img src="./7.jpg" alt=""></li>
			<li class="b1"><img src="./8.jpg" alt=""></li>
        </ul>
		<div id="alla" class="cc"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
		<a href="#">4</a><a href="#">5</a><a href="#">6</a></div>
        <span id="toleft1">&lt;</span>
        <span id="right-btn1">&gt;</span>
    </div>
</body>


</html>