轮播图详解

我理解的轮播图思想是这样：一些图片按指定顺序依次播放，就像一幅卷轴徐徐打开一般，一手打开，一手又卷起。所以可以将所要轮播的图片“拼在一起”构成一幅大图，在窗口前拉动。

每个黑边框模拟一张需要轮播的图片，一组黑边框构成一幅大图，红色边框模拟窗口，代表每次能显示的区域。

1.构建窗口

.container {
      position: relative;
      width: 1000px;
      height: 406px;
      margin:0 auto 0 auto;
      background-color:#1287b4;
      overflow: hidden;
	  color:white;
    }

<div class="container">

</div>

2.构建一组照片组成的大图

 .container .wrap {
      position: absolute;
      width: 5000px;
      height: 406px;
      z-index: 1;
	 padding:0;
    }
    .container .wrap img {
      
      width: 1000px;
      height: 316px;
	  margin:0;
    }


<div class="wrap" style="left: -1000px;">
			
				<div style="float:left;margin:0;border-color:none;padding:0;width:1000px;">
					<img src="images/校园.jpg" alt="2">	
					<div style="margin-left:7%;">
						<span style="font-size:25px;line-height:25px;margin-top:0;" ><br/>富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善</span>
					</div>
					
				</div>
				<div style="float:left;margin:0;border:none;padding:0;width:1000px;">
					<img src="images/主楼.jpg" alt="0">
					<div style="margin-left:7%;">
						<span style="font-size:25px;line-height:25px;margin-top:0;" ><br/>实事求是</span>
						<span><br/>SEEKING TRUTH FROM FACTS</span>	
					</div>
				</div>	
				<div style="float:left;margin:0;border:none;padding:0;width:1000px;">
					<img src="images/新区.jpg" alt="1">	
					<div style="margin-left:7%;">
						<span style="font-size:25px;line-height:25px;margin-top:0;"><br/>博学 求真 惟恒 创新</span>
						<span><br/>LEARNING EXTENSIVELY PENETRATING COURAGEOUSLY PURSUING PERMANENTLY INNOVATING CONSTANTLY</span>
					</div>
				</div>
				<div style="float:left;margin:0;border:none;padding:0;width:1000px;">
					<img src="images/校园.jpg" alt="2">	
					<div style="margin-left:7%;">
						<span style="font-size:25px;line-height:25px;margin-top:0;"><br/>富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善</span>
					</div>
				</div>
				<div style="float:left;margin:0;border:none;padding:0;width:1000px;">
					<img src="images/主楼.jpg" alt="0">
					<div style="margin-left:7%;">
						<span style="font-size:25px;line-height:25px;margin-top:0;" ><br/>实事求是</span>
						<span><br/>SEEKING TRUTH FROM FACTS</span>	
					</div>
				</div>
				
				
			</div>

3.就像“右手打开卷轴，左手卷起卷轴”，设置模仿左右手功能的按键

.container .arrow {
      position: absolute;
      top: 80%;
      color: white;
      padding:0px 14px;
      border-radius: 50%;
      font-size: 50px;
      z-index: 2;
      
    }
    .container .arrow_left {
      left: 10px;
    }
    .container .arrow_right {
      right: 10px;
    }
    .container:hover .arrow {
      display: block;
    }
    .container .arrow:hover {
      color: gray;
    }

<a href="javascript:;" style="text-decoration: none;" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" style="text-decoration: none;" rel="external nofollow" class="arrow arrow_right">></a>

4.为按键添加功能

 var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {  // 窗口向右移动
      next_pic();
    }
    prev.onclick = function () {  // 窗口向左移动
      prev_pic();
    }
    function next_pic () {
      var newLeft;
      if(wrap.style.left === "-4000px"){
        newLeft = -2000;
      }else{
        newLeft = parseInt(wrap.style.left)-1000;
      }
      wrap.style.left = newLeft + "px";
    }
    function prev_pic () {
      var newLeft;
      if(wrap.style.left === "0px"){
        newLeft = -2000;
      }else{
        newLeft = parseInt(wrap.style.left)+1000;
      }
      wrap.style.left = newLeft + "px";
    }

5.设置时钟，让窗口自动在“大图”上移动

    function autoPlay () {
      timer = setInterval(function () {
        next_pic();
      },2000);
    }
    autoPlay();

6.当鼠标移到窗口上时，图片暂时停止移动，鼠标移开后，窗口继续移动

 var container = document.querySelector(".container");
    container.onmouseenter = function () {
      clearInterval(timer);
    }
    container.onmouseleave = function () {
      autoPlay();  
    }

效果图：