原生js写轮播图和微信小程序轮播图

最新推荐文章于 2023-08-13 23:33:09 发布

lillian14

最新推荐文章于 2023-08-13 23:33:09 发布

阅读量370

点赞数

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/lillian14/article/details/107109851

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原始JS写轮播图
轮播图切换（类似选项卡）+dom操作+定时器

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body{
			margin: 0;
			font-size: 16px;
		}
		ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		img{
			vertical-align: middle;
		}

		#banner{
			width: 830px;
			height: 482px;
			margin: 100px auto;
			position: relative;
		}

		#banner li{
			/* display: none; */

			opacity: 0;
			position: absolute;
			left: 0;
			top: 0;
			transition: .5s;
		}
		#banner li.active{
			/* display: block; */
			
			opacity: 1;
		}

		.leftBtn, .rightBtn{
			width: 30px;
			height: 64px;
			position: absolute;
			top: 50%;
			margin-top: -32px;
			background-image: url(images/index.png);

			cursor: pointer;
			display: none;
		}
		.leftBtn{
			left: 20px;
			background-position: -82px -145px;
		}
		.leftBtn:hover{
			background-position: -161px -145px;
		}
		.rightBtn{
			right: 20px;
			background-position: -120px -145px;
		}
		.rightBtn:hover{
			background-position: -198px -145px;
		}

		.circle{
			width: 100%;
			position: absolute;
			bottom: 20px;
			text-align: center;
			font-size: 0;
		}
		.circle span{
			display: inline-block;
			width: 20px;
			height: 20px;
			background: #fff;
			background: url(images/index.png) -26px -100px;
			cursor: pointer;
			margin: 0 5px;
		}
		.circle span.active{
			background: url(images/index.png) 0 -100px;
		}

	</style>
</head>

<body>
	
	<div id="banner">
		<ul class="img">
			<li class="active"><a href="#"><img src="images/01.png" alt=""></a></li>
			<li><a href="#"><img src="images/02.png" alt=""></a></li>
			<li><a href="#"><img src="images/03.png" alt=""></a></li>
			<li><a href="#"><img src="images/04.png" alt=""></a></li>
			<li><a href="#"><img src="images/05.png" alt=""></a></li>
			<li><a href="#"><img src="images/06.png" alt=""></a></li>
			<li><a href="#"><img src="images/07.png" alt=""></a></li>
			<li><a href="#"><img src="images/08.png" alt=""></a></li>
		</ul>

		<div class="leftBtn"></div>
		<div class="rightBtn"></div>

		<div class="circle">
			<span class="active"></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

	<script>
		var banner=document.querySelector('#banner');
		var lis=document.querySelectorAll('#banner li');
		var spans=document.querySelectorAll('.circle span');
		var leftBtn=document.querySelector('.leftBtn');
		var rightBtn=document.querySelector('.rightBtn');

		var cn=0;	//当前次点击对应的索引
		var ln=0;	//上一次选中的图片对应的索引

		for(var i=0;i<spans.length;i++){
			spans[i].index=i;
			spans[i].onclick=function(){
				cn=this.index;
				/* //console.log(this.index);

				lis[ln].className='';
				lis[cn].className='active';

				spans[ln].className='';
				spans[cn].className='active';

				//lis[ln].className=spans[ln].className='';
				//lis[cn].className=spans[cn].className='active';

				ln=cn;	//当前次点击的索引相对于下一次点击来说就是上一次的索引 */

				change();
			};
		}

		function change(){
			lis[ln].className=spans[ln].className='';
			lis[cn].className=spans[cn].className='active';
			ln=cn;
		}

		leftBtn.onclick=function(){
			cn--;
			if(cn<0){
				cn=lis.length-1;
			}

			change();
		};

		rightBtn.onclick=function(){
			cn++;
			if(cn>lis.length-1){
				cn=0;
			}

			change();
		};

		var timer=setInterval(rightBtn.onclick,2000);

		banner.onmouseover=function(){
			leftBtn.style.display=rightBtn.style.display="block";
			clearInterval(timer);
		};
		banner.onmouseout=function(){
			leftBtn.style.display=rightBtn.style.display="none";

			timer=setInterval(rightBtn.onclick,2000);
		};
	</script>
</body>
<html>


![图片展示](https://img-blog.csdnimg.cn/20200703171813204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbGxpYW4xNA==,size_16,color_FFFFFF,t_70)



微信小程序轮播图代码

```javascript
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
      <block wx:for="{{movies}}" wx:key="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="goodimg" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
    </swiper>
![图片展示](https://img-blog.csdnimg.cn/20200703172638730.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbGxpYW4xNA==,size_16,color_FFFFFF,t_70)

lillian14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js写轮播图和微信小程序轮播图

原始JS写轮播图轮播图切换（类似选项卡）+dom操作+定时器<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; font-size: 16px; } ul{ list-style: none; margin: 0; padding: 0;
复制链接

扫一扫