JS实现轮播图的三种简单方法

Js实现轮播图01

实现思路
这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下:
实现效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图实现01</title>
		<style type="text/css">
			.lunbo{
				width: 900px;
				height: 400px;
				margin:100px auto;
			}
			.lunbo img{
				width: 100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<!--轮播图模块 -->
		<div class="lunbo">
			<img id="lunbo_img" src="./pic/img3.jpeg" >
		</div>
		<!-- Js代码 -->
    <script>
      var index = 1;
        function lunbo(){
            index ++ ;
            //判断index是否大于3
            if(index > 3){
                index = 1;
            }
            //获取img对象
            var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2.定义定时器
        setInterval(lunbo,2000);
        /*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo()方法,而导致定时器没用。
	</script>
	</body>
</html>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

Js实现轮播图02

实现思路
这可能是轮播图最简单点的实现之一,通过改变background的图片链接来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变background属性里面的url()图片链接的名字来实现切换效果。代码如下:
实现效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图实现02</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.lunbo{
				width:100%;
				height:720px;
				background-image: url(pic/img1.jpeg);/*背景图片*/
				background-size:100% 100%; 
			}
		</style>
	</head>
	<body>
		<div class="lunbo">
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
	  <span class="token keyword">var</span> index <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
		<span class="token keyword">function</span> <span class="token function">lunbo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			index <span class="token operator">++</span> <span class="token punctuation">;</span>
			<span class="token comment">//判断number是否大于3</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span>index <span class="token operator">&gt;</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
				index <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token comment">//获取img对象</span>
	<span class="token keyword">var</span> img <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">"lunbo"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
	img<span class="token punctuation">.</span>style<span class="token punctuation">.</span>background <span class="token operator">=</span> <span class="token string">"url(pic/img"</span><span class="token operator">+</span>index<span class="token operator">+</span><span class="token string">".jpeg)"</span><span class="token punctuation">;</span>
	img<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundSize<span class="token operator">=</span><span class="token string">"100% 100%"</span><span class="token punctuation">;</span>	
		<span class="token punctuation">}</span>
		<span class="token comment">//2.定义定时器</span>
		<span class="token function">setInterval</span><span class="token punctuation">(</span>lunbo<span class="token punctuation">,</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

Js实现轮播图03

本轮播图的实现,首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示, 通过js代码使用定时器不断调用类active突出显示li标签,同时隐藏兄弟li标签,再通过index++来实现切换循环显示的效果,当点击两边的按钮时,调用index++所在的方法实现切换的效果,没有复杂的算法,一点点基础一看代码就会学会,请大家参考。
实现效果
在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
		minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--引入CSS代码-->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<!--引入Js代码-->
		<script src="./js/index.js"></script>
		<title>Js实现轮播图</title>
	</head>
	<body>
		<div class="lunbo">
			<div class="content">
			<ul id="item">
				<li class="item">
					<a href="#"><img src="img/pic1.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic2.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic3.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic4.jpg" ></a>
				</li>
				<li class="item">
					<a href="#"><img src="img/pic5.jpg" ></a>
				</li>
			</ul>
			<div id="btn-left"><</div>
			<div id="btn-right">></div>
			<ul id="circle">
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

CSS代码

*{
	margin: 0;
	padding: 0;
}
a{
	list-style: none;
}
li{
	list-style: none;
}
.lunbo{
	width: 100%;
}
.content{
	width: 800px;
	height: 300px;
	margin: 20px auto;
	position: relative;
}
#item{
	width: 100%;
	height: 100%;

}
.item{
position: absolute;
opacity: 0;
transition: all 1s;

}
.item.active{
opacity:1;
}
img{
width: 100%;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/始终显示在图片的上层/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/使按钮向上偏移居中对齐/
cursor: pointer;
opacity: 0;/平时隐藏/
}
.lunbo:hover #btn-left{
/鼠标滑入,显示图标/
opacity: 1;
}

#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95

JS代码

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;

//清除class
var clearclass=function(){
for(let i=0;i<items.length;i++){
items[i].className=“item”;
circles[i].className=“circle”;
circles[i].setAttribute(“num”,i);
}
}
/只显示一个class/
function move(){
clearclass();
items[index].className=“item active”;
circles[index].className=“circle white”;
}
//点击右边按钮切换下一张图片
rightBtn.onclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//点击左边按钮切换上一张图片
leftBtn.onclick=function(){
if(index<items.length){
index;
}
else{
index=items.length-1;
}
move();
}
//开始定时器,点击右边按钮,实现轮播
timer=setInterval(function(){
rightBtn.onclick();
},1500)
//点击圆点时,跳转到对应图片
for(var i=0;i<circles.length;i++){
circles[i].addEventListener(“click”,function(){
var point_index=this.getAttribute(“num”);
index=point_index;
move();
})

}
//鼠标移入清除定时器,并开启一个三秒的定时器,使慢慢转动
content.onmouseover=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},3000)
}
//鼠标移出又开启定时器
content.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},1500)
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

代码可能写的不是很好,存在很多不足,欢迎大家指点批评,我会努力去改正,有疑问欢迎留言,我会尽力去解答,谢谢大家花宝贵的时间来阅读这篇文章。

  • 10
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值