js轮播图功能完善版

甘臣

于 2024-08-18 14:22:46 发布

阅读量131

点赞数 5

分类专栏： html+css+js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33607094/article/details/141299458

版权

html+css+js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

功能如下:

1.鼠标移出自动轮播

2.鼠标移入停止轮播

3.鼠标移入时监听鼠标上下滚轮移动

4.小圆点导航

代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<!-- <link rel="stylesheet" href="style.css"> -->
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}
 
		.banner {
			width: 600px;
			margin: auto;
			border: 10px solid greenyellow;
			height: 350px;
			position: relative;
			overflow: hidden;
		}
 
		.imgList {
			list-style: none;
			/* width: 2480px; */
			position: absolute;
			/* left:-620px; */
		}
 
		.imgList img {
			width: 600px;
			height: 350px;
		}
 
		.imgList li {
			float: left;
			margin-right: 20px;
		}
 
		.circle {
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
		}
 
		.circle a {
			width: 15px;
			height: 15px;
			background: yellow;
			display: block;
			border-radius: 50%;
			opacity: .5;
			float: left;
			margin-right: 5px;
			cursor: pointer;
		}
 
		.circle a.hover {
			background: black;
			opacity: .8;
		}
	</style>
</head>
 
<body>
	<div class="banner">
		<ul class="imgList">
			<li><img src="../1.png" alt=""></li>
			<li><img src="../2.jpg" alt=""></li>
			<li><img src="../3.jpg" alt=""></li>
			<li><img src="../4.jpg" alt=""></li>
		</ul>
		<div class="circle">
			<!-- <a href=""></a> 
		<a href=""></a> 
		<a href=""></a> 
		<a href=""></a>  -->
		</div>
	</div>
	<script>
		window.onload = function () {
			var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var thisIndex = 0;
			var imgListLi = imgList.children;
			var circleA = circle.children;
			var flag = true;
            var lunbovalid = true;
			imgList.style.width = imgList.children.length * 620 + 'px';
			for (var i = 0; i < imgList.children.length; i++) {
				var aNode = document.createElement('a');
				aNode.setAttribute('index', i);	//设置自定义属性
				if (i == 0) {
					aNode.className = 'hover';
				}
				circle.appendChild(aNode);
			}
			circle.addEventListener('click', function (e) {
				if (flag) {
					flag = false;
					// console.log(e.target);
					if (e.target.nodeName != 'A') {
						return false;
					}
					thisIndex = e.target.getAttribute('index');
					// imgList.style.left = -thisIndex * 620 + 'px';
					slow(imgList, -thisIndex * 620, function () {
						flag = true;
					});
					circleChange();
				}
			})
			function antoChange() {
				setInterval(function () {
					if (flag == true && lunbovalid == true) {
						flag = false;
						if (thisIndex >= circleA.length) {
							thisIndex = 0;
						}
						slow(imgList, -thisIndex * 620, function () {
							flag = true;
						});
						circleChange();
						thisIndex++;
					}
			    	}, 2000);
			}
			function circleChange() {
				for (var i = 0; i < circleA.length; i++) {
					circleA[i].className = '';
				}
				circleA[thisIndex].className = 'hover';
			}
			function slow(obj, target, callback) {
				obj.myInter = setInterval(function () {
					var offsetLeft = obj.offsetLeft;
					var num = (target - offsetLeft) / 10;
					num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
					if (offsetLeft == target) {
						clearInterval(obj.myInter);
						callback && callback();
					} else {
						obj.style.left = offsetLeft + num + 'px';
					}
				}, 10)
			}

            var demovalid = true

            function demo(e){
            if(e.wheelDelta){
                if(e.wheelDelta > 0 && demovalid == true){
                    demovalid = false
                    setTimeout(demo2,500)
                }
                if(e.wheelDelta < 0 && demovalid == true){
                    demovalid = false
                    setTimeout(demo1,500)
                }
            }
        }
            
            function demo1(){
                    console.log("down");
                    flag = false
                    thisIndex++
                    if (thisIndex >= circleA.length) {
							thisIndex = 0;
						}
                    slow(imgList, -thisIndex * 620, function () {
							flag = true;
						});
                    circleChange();

                    demovalid = true
            }

            function demo2(){
                    console.log("up");
                    flag = false
                    thisIndex--
                    if (thisIndex >= circleA.length) {
							thisIndex = 0;
						}
                    slow(imgList, -thisIndex * 620, function () {
							flag = true;
						});
                    circleChange();

                    demovalid = true
            }


            document.querySelector(".banner").addEventListener("mouseenter",function(){
                lunbovalid = false
            })

            document.querySelector(".banner").addEventListener("mouseleave",function(){
                lunbovalid = true
            })

            document.querySelector(".banner").addEventListener("mousewheel",demo)

            antoChange();

		}
            
            
	</script>
</body>
</html>