JS常见网页特效案例

1、网页轮播图

window.addEventListener('load', function() {
   
	// 1）获取元素
	var arrow_l = document.querySelector('.arrow_l');
	var arrow_r = document.querySelector('.arrow_r');
	var focus = document.querySelector('.focus');
	
	// 2）鼠标经过轮播图 显示隐藏左右按钮
	focus.addEventListener('mouseenter', function() {
   
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
		// 变量不用，要清空
		timer = null;
	});
	focus.addEventListener('mouseleave', function() {
   
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		// 开启定时器
		timer = setInterval(function() {
   
			// 手动调用点击事件
			arrow_r.onclick();
		}, 2000);
		
	});
	// 3） 动态生成小圆圈 有几张图片，就生成几个小圆圈
	// 获取ul对象 必须限定是谁的ul
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	var focusWidth = focus.offsetWidth; // 轮播图盒子的宽度
	// ol下li的个数取决于ul下li的个数
	for (var i = 0; i < ul.children.length; i++) {
   
		// 创建小li
		var li = document.createElement('li');
		//记录当前小圆圈的索引号 通过自定义属性来做
		li.setAttribute('index',i);
		// 把li插入ol里面
		ol.appendChild(li);
		// 4）小圆圈的排他思想
		li.addEventListener('click', function() {
   
			for (var i = 0; i < ol.children.length; i++) {
   
				// 清除所有的小li 的current 类
				ol.children[i].className = '';
			}
			// 当前的小 li 设置 current 类
			this.className = 'current';
			// 5）点击小圆圈，移动图片 移动的是ul
			// 点击当前小圆圈，获取索引
			var index = this.getAttribute('index');
			// 点击了某个小li 要把这个li的索引号给num
			num = index;
			// 点击了某个小li 要把这个li的索引号给circle
			circle = index;
			// ul移动距离的算法： 小圆圈的索引号 乘以 图片的宽度
			animate(ul, -index*focusWidth);
		});
	}
	// ol里面的第一个li设置类名为 current,默认选择第一个li
	ol.children