轮播图制作

标签：border   his   click   width   tor   llb   sel   pen   lag   

<div class="focus">
  <a href="#" class="arrow-l">?</a>
  <a href="#" class="arrow-r">?</a>
  <ul>
    <li><a href="#"><img src="./upload/focus.jpg" alt=""></a></li>
    <li><a href="#"><img src="./upload/focus1.jpg" alt=""></a></li>
    <li><a href="#"><img src="./upload/focus2.jpg" alt=""></a></li>
    <li><a href="#"><img src="./upload/focus3.jpg" alt=""></a></li>
  </ul>
  <ol class="circle">

  </ol>
</div>

.focus {position: relative;float: left;width: 722px;height: 457px;overflow: hidden;}
.focus .arrow-l,
.focus .arrow-r {position: absolute;top: 50%;width: 20px;height: 40px;margin-top: -20px; background-color: rgb(0, 0, 0, 0.2);color: #fff;font-size: 18px;font-family: ‘icomoon‘;line-height: 40px;z-index: 1;}
.focus .arrow-l {display: none;left: 0;}
.focus .arrow-r {display: none;right: 0;}
.focus ul {width: 600%;position: absolute;top: 0;left: 0;}
.focus ul li {float: left;}
.focus .circle {position: absolute; bottom: 15px;left: 50px;}
.focus .circle li{ float: left;width: 8px;height: 8px;margin: 0 3px;border: 2px solid rgba(255, 255, 255, 0.5);border-radius: 50%;cursor: pointer;}
.circle .active { background-color: #fff;}

window.addEventListener(‘load‘, function () {
	var focus = document.querySelector(‘.focus‘);
	var arrowR = document.querySelector(‘.focus .arrow-r‘);
	var arrowL = document.querySelector(‘.focus .arrow-l‘);
	var ul = document.querySelector(‘.focus ul‘);
	var ol = document.querySelector(‘.circle‘);
	// 获取 图片 的宽度
	var focusWidth = focus.offsetWidth;

	// 左右切换鼠标经过隐藏，离开消失
	focus.addEventListener(‘mouseenter‘, function () {
		arrowL.style.display = ‘block‘;
		arrowR.style.display = ‘block‘;
		clearInterval(timer);
		timer = null; // 释放定时器
	});
	focus.addEventListener(‘mouseleave‘, function () {
		arrowL.style.display = ‘none‘;
		arrowR.style.display = ‘none‘;
		timer = setInterval(function () {
			arrowR.click();
		}, 2000);
	});

	// 动态生成原点
	for (var i = 0; i < ul.children.length; i++) {
		var li = document.createElement(‘li‘);
		// 设置自定义属性 索引
		li.setAttribute(‘data-index‘, i);
		ol.appendChild(li);
		// 点击哪个小点就给哪个加选中样式
		li.addEventListener(‘click‘, function () {
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = ‘‘;
			}
			this.className = ‘active‘;
			// 点击当前 li 获取 索引号
			var index = this.getAttribute(‘data-index‘);
			// 把获取到的索引号给 num 和 circle
			num = circle = index;
			// ul 移动的距离 = -li 的索引号 * 图片的宽度 （负值）
			animate(ul, -index * focusWidth);
		});
	}
	ol.children[0].className = ‘active‘;
	// 克隆第一个 li 放到 ul 的后面
	ul.appendChild(ul.children[0].cloneNode(true));
	// 点击右侧按钮图片滚动
	var num = 0;
	var circle = 0;
	var flag = true; 
	arrowR.addEventListener(‘click‘, function (e) {
		e.preventDefault();
		if (flag) {
			flag = false;
			if (num == ul.children.length - 1) {
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul, -num * focusWidth, function () {
				flag = true; // 开启节流阀
			});
			circle++;
			// 如果circle等于4 说明走到了克隆的 li 
			if (circle == ol.children.length) {
				circle = 0;
			}
			circleChange();
		}
	});
	// 点击左侧按钮滚动
	arrowL.addEventListener(‘click‘, function (e) {
		e.preventDefault();
		if (num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * focusWidth + ‘px‘;
		}
		num--;
		animate(ul, -num * focusWidth);
		circle--;
		// 如果circle小于0 说明第一张图片，则圆圈改为4
		circle = circle < 0 ? ol.children.length - 1 : circle;
		circleChange();
	});

	// 自动播放
	var timer = setInterval(function () {
		arrowR.click();
	}, 2000);

	// 修改 当前 circle
	function circleChange() {
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = ‘‘;
		}
		ol.children[circle].className = ‘active‘;
	}

	// 封装动画函数
	function animate(obj, target, callback) {
		clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
    	step = step < 0 ? Math.floor(step) : Math.ceil(step);
    	if (obj.offsetLeft == target) {
      		clearInterval(obj.timer);
      		callback && callback();
    	}
    	obj.style.left = obj.offsetLeft + step + ‘px‘;
  	}, 15)
	}
});

轮播图制作

标签：border   his   click   width   tor   llb   sel   pen   lag   

原文地址：https://www.cnblogs.com/article-record/p/12617095.html