JS+CSS的轮播图

最新推荐文章于 2024-10-01 16:42:50 发布

yyy_wj

最新推荐文章于 2024-10-01 16:42:50 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/97923119

版权

1、简单轮播图


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

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 730px;
      height: 454px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 730px;
      height: 454px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }

  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner"><!--相框-->
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
    </ul>
    <div class="square">
      <span class="current">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </div>
</div>

<script>
   function my$(id) {
    return document.getElementById(id);
  }
  //获取最外面的div
  var box=my$("box");
  //获取相框
  var inner=box.children[0];
  //获取相框的宽度
  var imgWidth=inner.offsetWidth;
  //获取ul
  var ulObj=inner.children[0];
  //获取所有的span标签
  var spanObjs=inner.children[1].children;
  //循环遍历所有的span标签,注册鼠标进入的事件
  for(var i=0;i<spanObjs.length;i++){
    //循环的时候把索引值保存在每个span的自定义属性中
    spanObjs[i].setAttribute("index",i);
    //注册鼠标进入事件
    spanObjs[i].onmouseover=function () {
      //先干掉所有的span的背景颜色
      for(var j=0;j<spanObjs.length;j++){
        //移除了每个span的类样式
        spanObjs[j].removeAttribute("class");
      }
      //设置当前的span的背景颜色
      this.className="current";
      //移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
      //获取当前鼠标进入的span的索引
      var index=this.getAttribute("index");
      animate(ulObj,-index*imgWidth);
    };
  }
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 20);
  }


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

2、左右焦点轮播图


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body, ul, ol, li, img {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }

    .ad {
      width: 520px;
      height: 280px;
      overflow: hidden;
      position: relative;
    }

    #box img {
      width: 520px;
    }

    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }

    .ad ol li.current {
      background: yellow;
    }

    .ad ul li {
      float: left;
    }

    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }

    .ad ul li.current {
      display: block;
    }

    #focusD {
      display: none;
    }

    #focusD span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div id="box" class="all">
  <div class="ad">
    <ul id="imgs">
      <li><img src="images/01.jpg"/></li>
      <li><img src="images/02.jpg"/></li>
      <li><img src="images/03.jpg"/></li>
      <li><img src="images/04.jpg"/></li>
      <li><img src="images/05.jpg"/></li>
    </ul>
  </div><!--相框-->
  <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
  </div>
</div>
<script src="common.js"></script>
<script>

  //获取最外面的div
  var box = my$("box");
  //获取相框
  var ad = box.children[0];
  //获取相框的宽度
  var imgWidth = ad.offsetWidth;
  //获取ul
  var ulObj = ad.children[0];
  //获取左右焦点的div
  var focusD = my$("focusD");

  //显示和隐藏左右焦点的div----为box注册事件
  box.onmouseover = function () {
    focusD.style.display = "block";
  };
  box.onmouseout = function () {
    focusD.style.display = "none";
  };


  //点击右边按钮
  var index=0;
  my$("right").onclick = function () {
    if(index<ulObj.children.length-1){
      index++;
      animate(ulObj,-index*imgWidth);
    }

  };
  //点击左边按钮
  my$("left").onclick = function () {
    if(index>0){
      index--;
      animate(ulObj,-index*imgWidth);
    }
  };


  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 20);
  }

</script>

</body>
</html>

3、无缝连接的轮播图


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

    ul {
      list-style: none;

    }

    img {
      vertical-align: top;
    }

    /*取消图片底部3像素距离*/
    .box {
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    }

    .box ul li {
      float: left;
    }

    .box ul {
      width: 1500px;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<div class="box" id="screen">
  <ul>
    <li><img src="imagess/01.jpg" alt=""/></li>
    <li><img src="imagess/02.jpg" alt=""/></li>
    <li><img src="imagess/03.jpg" alt=""/></li>
    <li><img src="imagess/04.jpg" alt=""/></li>
    <li><img src="imagess/01.jpg" alt=""/></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  var current = 0;//只声明了一次
  function f1() {
    var ulObj = my$("screen").children[0];
    current -= 10;

    if (current < -1200) {
      ulObj.style.left = 0 + "px";
      current = 0;
    } else {
      ulObj.style.left = current + "px";
    }


  }

  var timeId=setInterval(f1, 20);


  my$("screen").onmouseover=function () {
    //停止
    clearInterval(timeId);
  };
  my$("screen").onmouseout=function () {
    //继续
    timeId=setInterval(f1, 20);
  };

</script>

</body>
</html>

//common.js
function my$(id) {
    return document.getElementById(id);
}

4、完整的轮播图


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	* {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }

	</style>
</head>
<body>
	<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images2/1.jpg" width="500" height="200"/></li>
      <li><img src="images2/2.jpg" width="500" height="200"/></li>
      <li><img src="images2/3.jpg" width="500" height="200"/></li>
      <li><img src="images2/4.jpg" width="500" height="200"/></li>
      <li><img src="images2/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>

<script type="text/javascript">
	
	var box=my$("box");
	//获取相框
	var screen=box.children[0];
	//获取相框的宽度
	var imgWidth=screen.offsetWidth;
	//获取ul
	var ulObj=screen.children[0];
	//获取li
	var list=ulObj.children;
	//获取ol
	var olObj=screen.children[1];
	//焦点的div
	var arr=my$("arr");
	//创建小按钮，根据ul中的li的个数
	var pic=0;
	for (var i = 0; i < list.length; i++) {
		//创建li标签，加入到ol中
		var liObj=document.createElement("li");
		//在每个ol中的li标签上添加一个自定义属性，存储索引值
		liObj.setAttribute("index",i);

		olObj.appendChild(liObj);
		liObj.innerHTML=(i+1);
		//注册鼠标进入事件
		liObj.onmouseover=function () {
			//先干掉所有ol中li的背景颜色
			for (var j = 0; j < olObj.children.length;j++){
				olObj.children[j].removeAttribute("class");
			}
			//设置当前鼠标进来的li的背景颜色
			this.className="current";
			//获取鼠标进入的li的当前索引值
			 pic=this.getAttribute("index");
			//移动ul
			animate(ulObj,-pic*imgWidth);
			
		};
	}
	//设置ol中第一个li有背景颜色
	olObj.children[0].className="current";
	ulObj.appendChild(ulObj.children[0].cloneNode(true));
	var timeId=setInterval(clickHandle,1000);
	//鼠标进入到box显示左右焦点
	box.onmouseover=function () {
		arr.style.display="block";
		//鼠标进入之前废掉之前的定时器
		clearInterval(timeId);
	};

	//鼠标离开隐藏左右焦点
	box.onmouseout=function() {
		arr.style.display="none";
		timeId=setInterval(clickHandle,1000);
	};
	//右边按钮
	my$("right").onclick=clickHandle;
	function  clickHandle(){
		if (pic==list.length-1){
			pic=0;
			ulObj.style.left=0+"px";
		} else {
			pic++;
			animate(ulObj,-pic*imgWidth);
			//如果pic==5说明，显示的是第6张图（内容是第一张图片），第一个小按钮有颜色
			if (pic==list.length-1){
			//第五个颜色干掉
			olObj.children[olObj.children.length-1].className="";
			//第一个小按钮颜色设置上
			olObj.children[0].className="current";
			} else {
				//干掉所有小按钮的背景颜色
				for (var i = 0; i < olObj.children.length; i++) {
					olObj.children[i].removeAttribute("class");
				}
				olObj.children[pic].className="current";
			}

		}
	};



	//左边按钮
	my$("left").onclick=function () {
		if(pic==0){
			pic=5;
			ulObj.style.left=-pic*imgWidth+"px";
		}
		pic--;
		animate(ulObj,-pic*imgWidth);
		//设置小按钮的颜色
		for (var i = 0; i < olObj.children.length; i++) {
			olObj.children[i].removeAttribute("class");
		}
		//当前pic的索引对应的按钮设置颜色
		olObj.children[pic].className="current";
	};

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

轮播图中大多都运用了匀速动画