js实现：使用鼠标点击箭头控制轮播图的运动

1.首先来看一下html文件的代码：

<div class="main">
    <div class="main-wrapper">
        <div class="carousel-map" id="banner-group">
            <ul class="carousel-img" id="banner-ul">
                <li><a href="#"><img src="./../../dist/images/news.min.jpg" alt=""></a></li>
                <li><a href="#"><img src="./../../dist/images/news01.min.jpg" alt=""></a></li>
                <li><a href="#"><img src="./../../dist/images/news02.min.jpg" alt=""></a></li>
                <li><a href="#"><img src="./../../dist/images/news03.min.jpg" alt=""></a></li>
            </ul>
            <span class="arrow left-arrow"><</span>
            <span class="arrow right-arrow">></span>
        </div>
        <div class="header-sec">
        </div>
    </div>
</div>

2. 然后来看一下css文件中的样式：

.main {
  margin-top: $headerHeight + 10px;

  .main-wrapper {
    width: $mainWrapperWidth;
    margin: 0 auto;

    .carousel-map {
      overflow: hidden;
      height: $headerSecHeight;
      width: 100%;
      margin: 0 auto;
      position: relative;

      .carousel-img {
        width: $carouselImgTotalWidth;
        height: $carouselImgHeight;
        margin: 0 auto;
        position: absolute;

        li {
          float: left;
          list-style: none;

          a {
            text-decoration: none;

            img {
              width: $carouselImgWidth;
              height: $carouselImgHeight;
            }
          }
        }
      }

      .arrow{
        font-family: "Helvetica,Helvetica Neue,Arial,sans-serif";
        font-size: 80px;
        color: #ffffff;
      //  将其设置为绝对定位，相对于bannerGroup，就可以显示出箭头
        position: absolute;
        overflow: hidden;
        cursor: pointer;
      //  默认情况下，不显示
        display: none;
      }
      .left-arrow{
        top: 35%;
        margin-left: 35px;
      }
      .right-arrow {
        top: 35%;
        margin-left: 1220px;
      }
    }
  }
}

3. 接下来就是js文件中实现控制轮播图的运动，

//定义一个对象
function Banner() {
	//定义对象的属性
	this.index = 0;
	this.leftArrow = $(".leftArrow");
	this.rightArrow = $(".rightArrow");
	this.bannerGroup = $("#banner-group");
	this.bannerUl = $("#banner-ul");
	// 统计banner-ul下面的子标签li的个数，
	this.liList = this.bannerUl.children("li");
	this.bannerCount = this.liList.length;
}

// 定义一个函数，轮播图运动起来的函数
Banner.protype.loop = function() {
	var self = this;
	// 咋着里需要设置一个定时器，
	self.timer = setIntervel(function(){
		if(self.index >= self.bannerCount - 1){
		self.index = 0;
		}else {
			self.index++;
		}
		// 假设这里的每个图片的宽度为1300px，这样的话，每次运动起来就是一个1300px的距离
		self.bannerUl.animate({"left": -1300*self.index},500)
	},2000);

// 监听鼠标处于轮播图之上轮播图的动作的执行
Banner.protype.listenBannerHover = function() {
	var self = this;
	self.bannerUl.hover(function() {
		// js中有一个函数为hover,这个函数里面可以有两个函数，第一函数可以定义鼠标移动到轮播图上的时候，轮播图所执行的动作
		// 清除定时器即可，此时将鼠标移动至轮播图之上的时候，就会自动的清除定时器
		clearIntervel(self.timer);
		self.toggleArrow(true);
	},function(){
	//第二个函数可以用来定义鼠标从UN博图上移走的之后，轮播图执行的动作
		//重新调用loop函数，使昆博图运动起来
		self.loop();
		self.toggleArrow(false);
	});
}

// 定义函数监听箭头的显示与否
//此时函数中就需要传递一个参数，根据该参数可以判定箭头是否应该显示
Banner.protype.toggleArrow = function(isShow) {
	// 为了避免每次加载页面都需要重新从文档流中查找左右箭头，这样我们就可以即将箭头设置为对象的属性进行保留
	// 我们需要知道的是，这里的this代表的是当前的函数
	//而self代表的是banner对象，我们如果想要使用banner对象上的属性就可以使用self
	var self = this;
	if(isShow){
		self.leftArrow.show();
		self.rightArrow.show();
	}else{
		self.leftArrow.hide();
		sef.rightArrow.hide();
	}
}

// 定义用箭头控制轮播图的运动与否
Banner.protype.listenArrowClick = function () {
	var self = this;
	// 定义左箭头被点击的函数，左箭头将会执行什么样的操作
	self.leftArrow.click(function() {
		if(self.index === 0){
			self.index = self.bannerCount - 1;
		}else {
			self.index--;
		}
		self.bannerUl.animate({"left": -1300*self.index},500)
	});
	// 定义右箭头被点击的函数，右箭头会执行什么样的函数
	self.rightArrow.click(function() {
		if(self.index === self.bannerCount - 1){
			self.index = 0;
		}else{
			self.index++;
		}
		self.bannerUl.animate({"left": -1300*self.index},500)
	});
}

// 定义一个run函数作为轮播图运动起来的主入口
Banner.protype.run = function() {
	this.loop();
	this.listenBannerHover();
	this.listenArrowClick();
}

// $()函数只有当文档流中所有的元素都加载完毕之后，才会执行。
$(function() {
	// new一个对象
	var banner = new Banner();
	// banner这个对象就拥有了Banner的所有属性和方法，即可以调用run使轮播图运动起来。
	banner.run();
});