js常用代码之左右轮播图(无缝轮播)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/* ------------------------------------------------------------------- */
		/* 2.覆盖css */
		body,
		html {
			height: 100%;
		}

		/* 移动端全屏覆盖 */
		#carousel {
			position: relative;
			left: 0;
			right: 0;

			width: 100%;
			height: 100%;

			overflow: hidden;
		}

		/* ------------------------------------------------------------------- */
	</style>
</head>

<body>
	<!-- ------------------------------------------------------------- -->
	<!-- 1,按此布局 -->
	<div id="carousel">
		<div class="carousel_inner">
			<img src="enter/001.jpg">
			<img src="enter/002.jpg">
			<img src="enter/003.jpg">
			<img src="enter/004.jpg">
		</div>
	</div>
	<!-- ------------------------------------------------------------- -->

	<script>
		var carousel = document.getElementById('carousel');
		var inner = document.querySelector('.carousel_inner');
		var indexTimer = speedTimer = null;
		var index = 0; //代表的图片页数,即改变index 就换图片,0代表第一种,1代表第二张图片
		var direction = 'left'; //轮播图初始移动方向,去其他任意值代表向右移动
		var imgtime = 1000; /* 图片更换时间 */
		var speed = 0;
		// 设置基础的样式
		basic_css(`
		* {
			margin: 0;
			padding: 0;
		}
 
		/* carousel的宽度高度可以动态设置,因为所以的宽度高度都是根据他所设置所以设置之后,所有的元素大小都会随之改变*/
		#carousel {
			position: relative;
			left: 0;
			right: 0;
			width: 100px;
			height: 100px;

		/* overflow: hidden;*/ 
		}
 
		.carousel_inner {
			position: absolute;
			height: 100%;
 
 
		}

		img {
			display: block;
			float: left;
		}`);
 
		inner.innerHTML += inner.innerHTML; //复制一份,解决图片从最后一张跳转到第一张照片缺失的问题
		var img = document.querySelectorAll('.carousel_inner img');



		// 动态设置宽度,即根据图片多少设置宽度
		inner.style.width = carousel.offsetWidth * img.length + 'px';
		for (var i = 0; i < img.length; i++) {
			img[i].style.width = carousel.offsetWidth + 'px';
			img[i].style.height = carousel.offsetHeight + 'px';
		}


		//在改变分辨率的同时动态设置宽度;
		window.addEventListener('resize', function () {
			inner.style.width = carousel.offsetWidth * 6 + 'px';
			for (var i = 0; i < img.length; i++) {
				img[i].style.width = carousel.offsetWidth + 'px';
				img[i].style.height = carousel.offsetHeight + 'px';
			}
		})

		//以下代码开始实现轮播图效果
		//设置定时器,每几秒换一张图片
		indexTimer = setInterval(indexFn, imgtime);

		function indexFn() {
			if (direction == 'left') {
				speed = -10;
				if (index == img.length / 2) {
					inner.style.left = 0;
					index = 1;
				} else {
					index++;
				}
			} else {
				speed = 10;
				if (index == 0) {
					inner.style.left = -inner.offsetWidth / 2 + 'px';
					index = 2
				} else {
					index--;
				}
			}
			moveStart(-index * img[0].offsetWidth)

		}

		function moveStart(target) {
			// console.log(target);
			//清除上一次定时器产生的影响
			clearInterval(speedTimer);
			speedTimer = setInterval(function () {
				//这里最好使用绝对值,我用过等于,但缺点是 如果不为整数的话
				//呢么这个定时器就会一直执行下去
				if (Math.abs(target - inner.offsetLeft) < 10) {
					clearInterval(speedTimer);
				} else {
					inner.style.left = inner.offsetLeft + speed + 'px';
				}
			}, 10)
		}
		// js动态添加css的样式
		function basic_css(cssText) {
			var style = document.createElement('style'); //创建一个style元素
			var head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
			style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
			if (style.styleSheet) { //IE
				var func = function () {
					try { //防止IE中stylesheet数量超过限制而发生错误
						style.styleSheet.cssText = cssText;
					} catch (e) {

					}
				}
				//如果当前styleSheet还不能用,则放到异步中则行
				if (style.styleSheet.disabled) {
					setTimeout(func, 10);
				} else {
					func();
				}
			} else {
				//w3c浏览器中只要创建文本节点插入到style元素中就行了
				var textNode = document.createTextNode(cssText);
				style.appendChild(textNode);
			}
			// head.appendChild(style,list.childNodes[0]); //把创建的style元素插入到head中,需要注意的是要放在上层    
			if (head.children[0]) {
				head.insertBefore(style, head.children[0]);
			} else {
				head.appendChild(style);
			}
		}
	</script>
</body>

</html>
posted @   coderwcb  阅读(468)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示