JavaScript书写的banner图滑动效果

最新推荐文章于 2023-11-17 12:25:08 发布

lijuhu

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： web前端 javascript

本文链接：https://blog.csdn.net/lijuhu/article/details/78884014

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用JavaScript编写一个简单的Banner图片轮播效果。通过封装获取id的方法和滑动函数，实现了鼠标悬停停止轮播，离开继续轮播的功能。同时，文章还涵盖了点击圆点和导航按钮来手动切换图片的实现细节。

摘要由CSDN通过智能技术生成

<script type="text/javascript">
			//封装获取id的方法
			function byId(id) {
				return typeof(id) === 'string' ? document.getElementById(id) : id;
			}

			//开始脚本
			//封装banner图的滑动函数
			var index = 0,
				timer = null;
			var pics = byId('banner').getElementsByTagName('div');
			var len = pics.length;
			var dots = byId('dots').getElementsByTagName('span');
			var prev = byId('prev'),
				next = byId('next')


			function sliderImg() {
				var main = byId('main');
				main.onmouseover = function() {
					//清除定时器
					if(timer) {
						clearInterval(timer)
					}
				}
				main.onmouseout = function() {
					timer = setInterval(function() {
						index++;
						if(index >= len) {
							index = 0;
						}
						//切换图片,  调用切换图片的函数 
						changeImg();
					}, 2000)
				}


				//自动在main上出发鼠标离开的事件
				main.onmouseout();
				//点击圆点切换图片
				for(var d = 0; d < len; d++) {
					dots[d].id = d;
					dots[d].onclick = function() {
						//改变index为当前sapn的索引
						index = this.id;
						this.className = 'active'
						changeImg();
					}
				}
				next.onclick = function() {
					index++;
					if(index >= len) {
						index = 0
					}
					changeImg();
				}
				prev.onclick = function() {
					index--;
					if(index < 0) {
						index = len - 1;
					}
					changeImg();
				}
			}


			//封装切换图片
			function changeImg() {
				for(var i = 0; i < len; i++) {
					pics[i].style.display = 'none';
					dots[i].className = "";
				}


				pics[index].style.display = 'block';
				dots[index].className = "active";
			}


			sliderImg();
		</script>