前端攻城狮---js之dom对象轮播图

先看一个效果

轮播图一个是点击左右切换按钮，图片切换，还有一个就是下面圆形的标记，当鼠标放上是颜色变，图片也变。

我们先写界面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   * {
	   	  padding: 0;
	   	  margin: 0;
	   }
	   .carousel {
	   	   width: 672px;
	   	   height: 350px;
	   	   margin: 50px auto;
           position: relative;
	   }
	   ul {
	   	  list-style: none;
	   }
	   .carousel ul li {
	   	   display: none;
	   }
	   .carousel ul li.current {
	   	   display: block;
	   }
	   .carousel .mask {
	   	    width: 100%;
	   	    height: 60px;
	   	    background-color: black;
	   	    opacity: 0.6;
	   	    filter: alpha(opacity=60);
	   	    position: absolute;
	   	    bottom: 30px;
	   }
	   .carousel h3 {
	   	   position: absolute;
	   	   height: 60px;
	   	   line-height: 60px;
	   	   bottom: 30px;
	   	   color: white;
	   	   font-size: 20px;
	   	   padding-left: 12px;
	   }
	   .carousel span {
	   	   position: absolute;
	   	   top: 132px;
	   	   width: 55px;
	   	   height: 55px;
	   	   cursor: pointer;
	   }
	   .carousel span.leftBtn {
	   	   left: 10px;
	   	   background: url(sohu/slide-btnL.png);
	   }
	   .carousel span.rightBtn {
	   	   right: 10px;
	   	   background: url(sohu/slide-btnR.png);
	   }
	   .carousel .circles {
	   	   position: absolute;
	   	   bottom: 0px;
	   	   width: 200px;
	   	   height: 17px;
	   	   left: 50%;
	   	   margin-left: -75px; 
	   }
	   .carousel .circles ol {
	   	   list-style: none;
	   }
	   .carousel .circles li {
	   	    width: 17px;
	   	    height: 17px;
	   	    float: left;
	   	    background: gold;
	   	    margin-right: 13px;
            border-radius: 50%;
	   }
	   .carousel .circles li.current {
	   	     background-color: purple;
	   }
	</style>
</head>
<body>
	<div class="carousel">
		<div class="imgList" id="imgList">
			<ul>
				<li class="current">
					<a href=""><img src="sohu/aaa.jpg" alt="" /></a>
					<div class="mask"></div>
					<h3>1111111111111</h3>
				</li>
				<li>
					<a href=""><img src="sohu/bbb.jpg" alt="" /></a>
					<div class="mask"></div>
					<h3>222222222222</h3>
				</li>
				<li>
					<a href=""><img src="sohu/ccc.jpg" alt="" /></a>
					<div class="mask"></div>
				    <h3>33333333333333</h3>
				</li>
				<li>
					<a href=""><img src="sohu/ddd.jpg" alt="" /></a>
				</li>
				<li>
					<a href=""><img src="sohu/eee.jpg" alt="" /></a>
				</li>
			</ul>
		</div>
		<div class="btns">
			<span class="leftBtn" id="leftBtn"></span>
			<span class="rightBtn" id="rightBtn"></span>
		</div>
		<div class="circles" id="circles">
			<ol>
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>
</body>
</html>

主要的思路就是给图片设置class样式，从而去显示和隐藏对应的图片，下面我们来看看js部分

<script type="text/javascript">
          // 得到所有的元素
          var leftBtn = document.getElementById("leftBtn");
          var rightBtn = document.getElementById("rightBtn");
          var circlesLis = document.getElementById("circles").getElementsByTagName("li");
          var imgListLis = document.getElementById("imgList").getElementsByTagName("li");

          var img_index = 0; // 范围0~4　也就是一共轮播图的数量

          // 左右按钮监听
          leftBtn.onclick = function() {
          	  img_index--;
          	  if(img_index < 0) {
          	  	 img_index = 4;
          	  }
          	  // 让对应图片显示
          	  changePic();
          }

          rightBtn.onclick = function() {
          	  img_index++;
          	  if(img_index > 4) {
          	  	 img_index = 0;
          	  }
          	  // 让对应图片显示
          	  changePic();
          }

          // 对小圆点进行批量监听
          for(var i=0; i<circlesLis.length; i++) {
          	  circlesLis[i].index = i;//强制添加属性的方式
          	  circlesLis[i].onmouseover = function() {
          	  	  img_index = this.index;
          	  	  changePic();
          	  }
          }

          function changePic() {
          	  // 1 先让所有图片隐藏 去掉current类
              for(var i=0; i<imgListLis.length; i++) {
              	 imgListLis[i].className = "";
              }
              // 2 让对应的图片显示
              imgListLis[img_index].className = "current";

              // 调整对应圆点的样式 排他思想
              // 3 先让所有圆点紫色样式去掉
              for(var i=0; i<circlesLis.length;  i++) {
              	 circlesLis[i].className = "";  
              }
              
              circlesLis[img_index].className = "current";

          }

    </script>

js的dom对象的轮播图案例已讲完，接下来会来讲js的dom对象的计算后样式的相关知识点，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。

前端攻城狮---js之dom对象轮播图

猜你喜欢