<!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>
一时失言乱红尘
爱被打了一巴掌
淩亂°似流年
深藏阁楼爱情的钟
系统管理员![[ansible]-ansible-playbook执行端口健康检查](https://image.dandelioncloud.cn/images/20221120/96d30ae461ed48a58ee018395aba0a40.png "[ansible]-ansible-playbook执行端口健康检查")
还没有评论，来说两句吧...