admin 管理员组

文章数量: 1184232

轮播图~~

demo

  • 内容
  • 实验原理
  • html
  • js
  • css
  • 样式

内容

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。

实验原理

鼠标悬停时停止定时器，显示左右控制器
移出时再设置回去，左右控制器消失。
改变wrapper的left值实现滑动

html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>demo4</title>
</head>
<link rel="stylesheet" href="./css/demo5.css">
<body><div class="content"><ul class="wrapper"><li>111</li><li>222</li><li>333</li><li>111</li></ul><ul class="radius"></ul><div class="prev"><span>《</span></div><div class="next"><span>》</span></div></div>
</body>
<script src="./js/demo5.js"></script>
</html>

js

<script>
window.onload= function() {var content = document.getElementsByClassName('content')[0]var wrapper = document.getElementsByClassName('wrapper')[0]var radius = document.getElementsByClassName('radius')[0]var prev = document.getElementsByClassName('prev')[0]var next = document.getElementsByClassName('next')[0]var imgWidth = wrapper.children[0].offsetWidthvar wrapIndex = 0//鼠标悬停时显示隐藏content.onmouseover = function() {clearInterval(timer)next.style.opacity = "0.6";prev.style.opacity = "0.6";}content.onmouseout = function() {timer = setInterval(function(){next.onclick()},3500)next.style.opacity = "0";prev.style.opacity = "0";}//动态创建圆点function createLi() {for(let i=0; i<wrapper.children.length-1; i++) {let li = document.createElement("li")radius.appendChild(li)}radius.children[0].className='radius-active'}createLi()//圆点响应function cirAction(wrapIndex) {for(let i=0; i<radius.children.length; i++) {radius.children[i].classList.remove("radius-active")}if(wrapIndex === wrapper.children.length-1) {radius.children[0].className='radius-active'}else {radius.children[wrapIndex].className='radius-active'}}//指示器控制function cirMouse() {for(let i=0; i<radius.children.length; i++) {radius.children[i].onmouseover = function() {clearInterval(timer);animate(wrapper, -i*imgWidth);wrapIndex = i;cirAction(wrapIndex)}}}cirMouse()//滑动动画function animate(el, target) {clearInterval(el.timer)el.timer = setInterval(function(){let move = 8;let present = wrapper.offsetLeft;move = present > target ? -move : move;present += move;if(Math.abs(present-target) > Math.abs(move)) {wrapper.style.left = present + 'px'}else {clearInterval(el.timer);wrapper.style.left = target + 'px'}},16)  }//next控制next.onclick = function() {if(wrapIndex === wrapper.children.length-1){wrapIndex = 0;wrapper.style.left = 0 + 'px';}wrapIndex++;animate(wrapper,-wrapIndex*imgWidth);cirAction(wrapIndex);}//prev控制prev.onclick = function() {if(wrapIndex === 0){wrapIndex = wrapper.children.length-1;wrapper.style.left = -wrapIndex*imgWidth + 'px';}wrapIndex--;animate(wrapper,-wrapIndex*imgWidth);cirAction(wrapIndex)}//自动滑动var timer = setInterval(function(){next.onclick()},3500)
}
</script>

css

<style>
*{margin: 0;padding: 0;
}
.content{width:600px;height: 300px;position: relative;overflow: hidden;margin: 0 auto;
}
.wrapper{width: 400%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;display: flex;transition: none;
}
.wrapper li{flex: 1;list-style: none;margin: 0;padding: 0;text-align: center;line-height: 300px;
}
.wrapper li:nth-of-type(1){background-color: red;
}
.wrapper li:nth-of-type(2){background-color: blue;
}
.wrapper li:nth-of-type(3){background-color: yellow;
}
.wrapper li:nth-of-type(4){background-color: red;
}
.radius{height: 12px;margin: 0;padding: 0;position: absolute;bottom: 10px;left: 10px;display: flex;align-items: center;
}
.radius li{width: 8px;height: 8px;border-radius: 50%;background-color: white;opacity: 0.6;margin: 0 3px;padding: 0;list-style: none;cursor: pointer;
}
.radius-active{opacity: 1 !important;border: 2px solid rgb(255, 255, 255, 0.5);background-clip: padding-box;
}
.prev{position: absolute;left: 0;top: 50%;
}
.next{position: absolute;right: 0;top: 50%;
}
.next,.prev{width: 23px;line-height: 34px;text-align: center;margin-top: -17px;background-color: darkgray;opacity: 0;cursor: pointer;
}
.next:hover,.prev:hover{background-color: rgb(200,200,200);
}
.prev span, .next span{font-weight: bold;color: white;font-size: 18px;
}
</style>

样式

轮播图

本文标签： 轮播图

版权声明：本文标题：轮播图~~ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1687357449a93379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。