jquery实现轮播图效果

效果图：

要求：

功能说明:
      1.图片自动向左播放，但是当鼠标过轮播区时暂停播放，放开则继续；
      2.点击左侧箭头显示上一张图； 
      3.点击右侧箭头显示下一张图；
      4.当鼠标滑到指示点的时候，显示对应的一张图；

html代码：

<div class="banner">
        <!--大图列表-->
        <ul class="pics-list">
            <li><a href="detail.html"><img src="img/banner/1.jpg"/></a></li>
            <li><a href="detail.html"><img src="img/banner/2.jpg"/></a></li>
            <li><a href="detail.html"><img src="img/banner/3.jpg"/></a></li>
            <li><a href="detail.html"><img src="img/banner/4.jpg"/></a></li>
        </ul>
        <!--指示点列表-->
        <ul class="points-list">
            <li class="active">●</li>
            <li>●</li>
            <li>●</li>
            <li>●</li>        
        </ul>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css代码：

*{padding: 0; margin: 0;}

/*图片*/
.banner{position: relative; height: 389px; width: 1200px; overflow: hidden;margin-left: 85px;}

.pics-list{height: 389px; width: 6000px;position: absolute;left:0;}
.pics-list li{float: left;width: 1200px;}

/*按钮*/
.left{width: 70px;height: 70px;background: url(../img/banner_arrow.png) no-repeat;position: absolute;top: 155px;}
.left:hover{background-position: 0 -72px;}
.right{width: 70px;height: 70px;background: url(../img/banner_arrow.png) no-repeat 0 -145px;position: absolute;top: 155px;left: 1130px;}
.right:hover{background-position: 0 -217px;}

/*小圆点*/
.points-list{position: absolute;left: 50%;bottom: 10px; margin-left: -100px;}
.points-list li{display:inline-block;padding: 0 5px;font-size: 24px;color: #999;opacity: 0.6;cursor: pointer}
.points-list li.active,.points-list li:hover{color:#ddd;}

js代码：

$(function() {
	var index = 0; //当前索引
	var funMove = function() {
		//var lastI = liLen - 1;
				if(index == 3) {
					index = 0;
				} else {
					index++;
				}
		//(index == 3) ? (index = 0) : (index++);
		//语法（条件）？（成立的执行语句）：（不成立的执行语句）
		moveTo(index);
	}
	var timer = setInterval(funMove, 3000); //自动轮播
	
	//鼠标划上停止，走开继续
	$(".pics-list").mouseover(function() {
		clearInterval(timer);
	}).mouseout(function() {
		setInterval(funMove, 3000)
	})


	//点击右箭头走一步
	$(".right").click(function() {
		funMove();
	})
	
	//点击左边箭头向后走一步
	$(".left").click(function() {
		//		index--;
//		if(index==0){
//			index = 3
//		}{
//			index--
//		}
		(index == 0) ? (index = 3) : (index--);
		moveTo(index);
	})
	
	//指示灯
	$('.points-list li').mouseover(function(){
		var nIndex=$(this).index();
		moveTo(nIndex);
	})
		
	
	//滚动的方法
	function moveTo(param){
		var goLeft = -(param * 1200) + "px"; //偏移的值
		$(".pics-list").animate({
			left: goLeft
		}); //滚动到指定图片		
		$('.points-list li').eq(param).addClass('active').siblings().removeClass('active');
	}

})

最后别忘了引入css，js，jquery库。

    <link rel="stylesheet" href="css/carousel_two.css" />
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/carousel_two.js" ></script>

ok啦。。。。