使用纯CSS、JS实现图片轮播效果的示例

发布时间:2021-04-23 10:12:06 作者:小新
来源:亿速云 阅读:168

小编给大家分享一下使用纯CSS、JS实现图片轮播效果的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

代码如下:

<!DOCTYPE html><html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--轮播-->
		<style>
			.carousel {
				width: 648px;
				height: 400px;
				margin: 0 auto;
				text-align: center;
				position: absolute;
				left: 24%;
				/*border: 1px solid red;*/
			}
			
			.inner {
				/*border: 12px solid blue;*/
				width: 648px;
				height: 400px;
				position: absolute;
			}
			
			.inner-img {
				width: 200px;
				height: 500px;
				display: none;
				/*position: absolute;*/
				position: relative;
				/*top:0;*/
				/*left:0;*/
				/*z-index:1000;*/
			}
			
			.inner-img.active {
				display: block;
			}
			
			.leftBtn,
			.rightBtn {
				position: absolute;
				width: 40px;
				height: 60px;
				background: rgba(0, 0, 0, 0.3);
				/*近乎透明色*/
				font-size: 30px;
				color: #fff;
				text-align: center;
				line-height: 60px;
				cursor: pointer;
				display: none;
			}
			
			.leftBtn {
				left: 5px;
				top: 170px;
			}
			
			.rightBtn {
				/*right:5px;*/
				left: 603px;
				top: 170px;
			}
			
			.carousel ul {
				position: absolute;
				/*left:20px;*/
				padding-left: 228px;
				bottom: 10px;
				/*z-index: 999;*/
				list-style: none;
				width: 200px;
				height: 20px;
			}
			
			.carousel ul .page {
				float: left;
				width: 18px;
				height: 18px;
				line-height: 18px;
				border-radius: 18px;
				/*变成圆形*/
				background: black;
				margin-right: 6px;
				/*距离6个px单位*/
				color: #fff;
				font-size: 14px;
				/*text-align: center;*/
				cursor: pointer;
			}
			
			.carousel ul .page.active {
				background-color: red;
			}
			
			.carousel p {
				/*float: left;*/
				margin-top: -360px;
				margin-right: -600%;
				color: black;
				text-decoration: none;
				list-style: none;
			}
		</style>

	</head>

	<body>
		<!--轮播-->
		<p class="carousel">
			<p class="inner">
				<a href="#" class="inner-img active"><img src="https://s2.ax1x.com/2019/11/06/MCxe0O.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxl9A.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxJnf.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxtHS.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxaNQ.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx6BT.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCxW4J.jpg" alt="图片加载中" width="648" height="400"></a>
					<a href="#" class="inner-img"><img src="https://s2.ax1x.com/2019/11/06/MCx43R.jpg" alt="图片加载中" width="648" height="400"></a>

					<p class="leftBtn">&lt;</p>
					<!--左按钮-->
					<p class="rightBtn">&gt;</p>
					<!--右按钮-->
			</p>
			<ul>
				<li class="page active">1</li>
				<li class="page">2</li>
				<li class="page">3</li>
				<li class="page">4</li>
				<li class="page">5</li>
				<li class="page">6</li>
				<li class="page">7</li>
				<li class="page">8</li>
			</ul>
		</p>

	</body>

	<script>
		var carousel = document.getElementsByClassName('carousel')[0], //获取carousel的class类
			// 获取所有包含图片的链接
			innerImg = document.getElementsByClassName('inner-img'),
			// 获取左右按钮
			btnL = document.getElementsByClassName('leftBtn')[0],
			btnR = document.getElementsByClassName('rightBtn')[0],
			// 获取分页器
			page = document.getElementsByClassName('page'),
			num = 0; // 声明变量 初始图片为第一张0
		// 声明时间控制函数
		var timer = setInterval(moveR, 2500); //调用moveR 时间间隔2.5s 
		// 图片向右轮播
		function moveR() {
			num++; // 变量每3000毫秒递增一次,图片向右轮播
			// 如果是最后一张图片的时候从0开始显示
			if(num == innerImg.length) {
				num = 0;
			}
			move();
		};
		// 图片向左轮播
		function moveL() {
			num--; // 每调用一次moveL(),变量递减一次
			// 如果是第一张图片,则从最后一张图片开始显示
			if(num == -1) {
				num = innerImg.length - 1;
			};
			move();
		}     // 图片切换
		  		function move() {     // 把所有的innerImg隐藏和page背景全部变成黑色
			for(var i = 0; i < innerImg.length; i++) {
				innerImg[i].style.display = 'none';
				page[i].style.background = 'black';
			}
			// 把当前num下标的innerImg显示和page背景变成red
			innerImg[num].style.display = 'block';
			page[num].style.background = 'red';  		}

		// 分页器鼠标滑过时图片切换
		for(var i = 0; i < page.length; i++) {
			// 用来保存下标,page[i].index == 0 / 1 / 2 / 3 /4...
			page[i].index = i;
			// console.log(page[i].index);
			// 因为已经保存好的下边,这里的page[i], page[0], page[1], page[2], page[3]
			page[i].onmouseover = function() {
				for(var j = 0; j < page.length; j++) {
					page[j].style.background = 'black';
					innerImg[j].style.display = 'none';
				}
				this.style.background = 'red';        // console.log(this.index);可以查看是多少
				innerImg[this.index].style.display = 'block';
				num = this.index;
			}
		}
		btnL.onclick = function() {
			moveL();
		}
		btnR.onclick = function() {
			moveR();
		}

		// 鼠标划上carousel时让左右按钮显示 并清除时间函数 
		carousel.onmouseover = function() {
			// 清除时间函数
			clearInterval(timer); //暂停 图片不继续循环
			btnR.style.display = 'block';
			btnL.style.display = 'block';
		}

		// 鼠标离开carousel时让左右按钮隐藏
		carousel.onmouseout = function() {
			// 开启时间函数
			timer = setInterval(moveR, 2500);
			btnR.style.display = 'none';
			btnL.style.display = 'none';
		}
	</script></html>

以上是“使用纯CSS、JS实现图片轮播效果的示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 怎么使用纯CSS实现蚊香燃烧的效果
  2. 怎么使用纯CSS实现菱形loader效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css js

上一篇:css中会不会区分大小写

下一篇:基于BootStrap multiselect.js实现的下拉框联动效果

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》