JavaScript轮播图

最新推荐文章于 2024-11-12 08:41:57 发布

ZiWie丶ZHANG

最新推荐文章于 2024-11-12 08:41:57 发布

阅读量197

点赞数 1

分类专栏： JavaScript HTML5

本文链接：https://blog.csdn.net/ziwei1259455949/article/details/120001386

版权

JavaScript 轮播图动画效果事件监听 DOM操作

关键词由CSDN通过智能技术生成

HTML5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

JavaScript轮播图

JavaScript

window.onload = function () {
	//自定义获取元素样式方法
	function getStyle(obj, name) {
		if(window.getComputedStyle) {
			return getComputedStyle(obj, null)[name];
		}else {
			return  obj.currentStyle[name];
		}
	}
	/*动画方法
   * 参数：
   *   obj：要执行动画的对象
   *   attr：动画执行样式
   *   target：执行动画目标位置
   *   speed：移动的速度（正数向右运动， 负数向左运动）
   *   callback：回调函数，在动画执行完毕后执行
   * */
	function move(obj, attr, target, speed, callback){

		// 关闭之前定时器
		clearInterval(obj.timer);

		//开启定时器
		obj.timer = setInterval(function () {

			//获取原left值
			let oldValue = parseInt(getStyle(obj, attr));

			//设置新left值，不断递增
			let newValue = oldValue + speed;

			/*
			 * 向左移动时,需要判断newValue是否小于target
			 * 向右移动时,需要判断newValue是否大于target
			 * 递增最大值为target值
			 * */
			if ((speed < 0 && newValue < target) || (speed > 0 &&  newValue > target)) {
				newValue = target;
			}

			//设置left不断递增
			obj.style[attr] = newValue + "px";

			// 判断目标位置
			if(newValue === target) {
				// 到达目标关闭定时器
				clearInterval(obj.timer);

				// 动画执行完毕执行函数
				callback();
			}
		},20);
	}

	// 获取box1
	const box1 = document.getElementById("box1");
	//获取按钮id
	const btn1 = document.getElementById("btn1");
	const btn2 = document.getElementById("btn2");
	// 获取navUl
	const navUl = document.getElementById("navUl");
	let navLi = navUl.getElementsByTagName("li");

	// 获取导航拦li
	const imgUl = document.getElementById("imgUl");
	let imgLi = imgUl.getElementsByTagName("li");

	//index存储下标
	let index = 0;

	//鼠标经过图片样式
	box1.addEventListener('mouseenter', function () {
		btn1.style.display = "block";
		btn2.style.display = "block";
		box1.style.cursor = "pointer";
		// 关闭定时器
		clearInterval(timer);
		timer = null;
	})

	//鼠标离开图片样式
	box1.addEventListener('mouseleave', function () {
		btn1.style.display = "none";
		btn2.style.display = "none";
		// 开启定时器
		timer = setInterval(function () {
			btn2.click();
		},2000);

	})

	//根据图片数量动态生成导航栏
	for (let i = 0; i < imgLi.length; i++){

		//创建li
		let li = document.createElement("li");

		//自定义属性，记录下标
		li.setAttribute('index', i);

		// 添加进navUl
		navUl.appendChild(li);

		//给li添加是点击事件
		li.addEventListener('click', function () {

			// 遍历清除li原有class
			for (let  j = 0; j < navLi.length; j++){
				navLi[j].className = "";
			}
			// 点击这获取选中class样式
			navLi[index].className = 'pitch';

			// 获取当前索引
			index = this.getAttribute('index');

			// 点击圆点切换图片：索引 * div宽
			move(imgUl, "left",  -box1.offsetWidth * index, -10, function (){});
		})
	}

	// 初始化navLi样式样式选中
	navLi[0].className = 'pitch';

	//设置导航拦动态居中：(box1宽 - navUl宽) / 2
	navUl.style.left = (box1.offsetWidth - navUl.offsetWidth) / 2 + "px";

	// 左按钮
	btn1.onclick = function () {
		index--;
		if (index < 0){
			index = imgLi.length - 1;
		}
		move(imgUl, "left",  -box1.offsetWidth * index, 10, function (){
			eliminate();
			clearInterval(timer);
			timer = null;
		})
	}

	// 右按钮
	btn2.onclick = function () {
		index++;
		if (index > imgLi.length - 1){
			index = 0;
		}
		move(imgUl, "left",  -box1.offsetWidth * index, -10, function (){
			eliminate();
			clearInterval();
		})
	}

	//启动轮播
	 let timer = setInterval(function () {
		btn2.click();
	},2000);

	// 重定位小圆点
	function eliminate(){
		// 遍历清除li原有class
		for (let  j = 0; j < navLi.length; j++){
			navLi[j].className = "";
		}
		// 点击这获取选中class样式
		navLi[index].className = 'pitch';
	}
}

HTML5+CSS3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
      *{padding: 0; margin: 0;}

      #box1{
          box-sizing: border-box;
          margin: 20px auto;
          width: 666px;
          height: 666px;
          border: 1px solid;
          position: relative;
          overflow: hidden;
      }

      #imgUl{
          display: flex;
          width: 100%;
          height: 100%;
          position: relative;
          left: 0;
          top: 0;
      }
      img{
          width: 666px;
          height: 666px;
      }

      #btn1, #btn2{
          position: absolute;
          top: 50%;
          font-size: 20px;
          background-color: unset;
          border-radius: 20%;
          padding: 10px;
      }
      #btn1{ left: 0; }
      #btn2{ right: 0; }
      #btn1:hover,
      #btn2:hover{
          background-color: rgba(243, 240, 240, 0.5);
      }

      #navUl{
          display: flex;
          position: absolute;
          bottom: 15px;
      }
      #navUl>li{
          background-color: red;
          width: 15px;
          height: 15px;
          list-style: none;
          margin-right: 20px;
          border-radius: 50%;
          cursor: pointer;
      }

      #navUl>li:hover{ background-color: #41a835;}
      .pitch{background-color: #41a835 !important;}
  </style>
  <script type="text/javascript" src="../js/wzlbt.js"></script>

</head>
<body>

  <div id="box1">
    <ul id="imgUl">
      <li><img src="../img/2.jpg" alt="完整轮播图"></li>
      <li><img src="../img/3.jpg" alt="完整轮播图"></li>
      <li><img src="../img/4.jpg" alt="完整轮播图"></li>
      <li><img src="../img/5.jpg" alt="完整轮播图"></li>
      <li><img src="../img/6.jpg" alt="完整轮播图"></li>
      <li><img src="../img/7.jpg" alt="完整轮播图"></li>
      <li><img src="../img/8.jpg" alt="完整轮播图"></li>
      <li><img src="../img/9.jpg" alt="完整轮播图"></li>
    </ul>

    <button id="btn1"> < </button>
    <button id="btn2"> > </button>

    <ul id="navUl">

    </ul>
  </div>
</body>

</html>