jQuery实现常见的轮播图效果

1.在网页中常见的一类轮播图如下图所示，

此处以小米官网(www.mi.com)为例进行说明

                

说明：红色箭头标注的是左、右箭头；右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点；

2.轮播图的特点

    a. 能够进行左右方向的切换，即点击左箭头表示切换到上一张，点击向右箭头表示切换到下一张；

    b. 点击左右翻页时，对应的小圆点要能够进行联动，即小圆点的选中状态要跟着切换；

    c. 当在第一张图片上点击向左按钮时，会切换到尾页，同理，尾页单击向右箭头时能切换到首页；

    d. 点击对应的小圆点能够切换到对应的页面；

    e. 当没有点击箭头或者小圆点时，图片要自动轮播；

    f. 在图片自动轮播过程中，要屏蔽其他操作(箭头或小圆点等)；

    g. 当鼠标滑动到图片区域时，图片停止自动轮播，当鼠标移开时，又开始自动轮播；

3.实现轮播图的一般思路

    

      有一个轮播图的容器，图片浮动成一排排列，单击切换时，实际上就是改变子元素的浮动位置即可

      此处作为演示的代码如下： 

        html部分：

            <div class='slider'>
                <div class="slider-img-wrapper">
                   <a href="" class="item"><img src="./image/slide-4.jpg" /></a>
                   <a href="" class="item"><img src="./image/slide-1.jpg" /></a>
                   <a href="" class="item"><img src="./image/slide-2.png" /></a>
                   <a href="" class="item"><img src="./image/slide-3.jpg" /></a>
                </div>
                <div class="slider-arrow">
                    <a href="#0" class="item left">
                        <i class="iconfont">&#xe6a0;</i>                        
                    </a>
                    <a href="#1" class="item right">
                        <i class="iconfont">&#xe66c;</i>
                    </a>
                </div>
                <div class="slider-process">
                    <ul>
                        <li class="item focus"></li>
                        <li class="item"></li>
                        <li class="item"></li>
                        <li class="item"></li>
                    </ul>
                </div>
            </div

说明： 

        class='slider' 表示最外层的容器，即轮播图中展示图片的容器；

        class='slider-img-wrapper'  表示所有图片排成一横排的容器；

        class='slider-arrow'  表示向左和向右的箭头，即是箭头的父元素；（此处的箭头使用的是iconfont.cn中的图标，也可以使用图片来代替）

        class='slide-process'  表示切换图片显示的小圆点；（此处小圆点的个数要与图片的数量保持一致）

        css部分：

/*slide区域布局开始*/
.middle_top .slider{
    float: left;
    overflow: hidden;
    position: relative;
    width:545px;
    height: 413px;
    margin-top: 7px;
    display: inline-block;
}

.slider-img-wrapper{
	width: 2180px;
    height: 414px;
}

.slider-img-wrapper a{
	display: inline-block;
	width: 545px;
	height: 413px;
}

.slider-img-wrapper .item{
    float: left;
    position: relative;
}

.slider-arrow{
	overflow: hidden;
	position: absolute;
	width: 545px;
	height: 40px;
	top: 50%;
	margin-top: -20px;
}

.slider-arrow .item{
	display: inline-block;
	width: 40px;
	height: 40px;
	text-decoration: none;
	line-height: 40px;
	color: rgba(255, 255, 255, .2);
	box-sizing: border-box;
}

.slider-arrow .item:hover{
	color: #222;
}

.slider-arrow .item i{
	font-size: 30px;
}

.slider-arrow .left{
	float: left;
	margin-left: 10px;
}

.slider-arrow .right{
	float: right;
	margin-right: 10px;
}

.slider-arrow .right i{
	float: right;
}

.slider-process{
	position: absolute;
	bottom: 0;
	width: 544px;
	height: 20px;
}

.slider-process ul{
	display: block;
	width: 90px;
	height: 14px;
	margin-left: 252px;
	margin-top: 2px;
}

.slider-process ul li{
	float: left;
	margin-right: 6px;
	width: 12px;
	height: 12px;
 	border: .5px solid #eee;
	border-radius: 50%;
	cursor: pointer;
}

.slider-process ul li:hover{
    background: #098;
}

.focus{
	background: #089;
}
/*slide区域布局结束*/

说明： 此处css样式代码可以结合自身喜好来设置，此处仅作参考~

4.jQuery代码的设计

    我们可以考虑编写一个插件来实现对特定区域的轮播图效果；

    不妨设置插件名为：UiSlider

     当我们要使 class=‘slider’ 的元素呈现出轮播图的效果时，我们可以使用如下方法调用该插件：

$(function(){
    /*对class='slider'的元素调用UiSlider方法*/
	$('.slider').UiSlider();
})

    对UiSlider插件的编写：

       1.首先获取所有特定的元素(箭头、图片、图片容器、小圆点)

$.fn.UiSlider  =function(){
	var ui = $(this);
	//获取图片的直接父元素
	var wrap = $('.slider-img-wrapper .item');

	//选中slider中的图片元素
	var items = $('.slider-img-wrapper .item',ui);

	//选中slider中的向左和向右箭头
	var btn_prev = $('.slider-arrow .left',ui);
	var btn_next = $('.slider-arrow .right',ui);

	//图片中的小圆点
	var tips = $('.slider-process ul .item',ui);
}

      2.为箭头和小圆点绑定事件：

    //向左向右的点击事件
	btn_prev.on('click', function(){
		wrap.triggerHandler('move_prev');
	});
	btn_next.on('click', function(){
		wrap.triggerHandler('move_next');
	})

	//小圆点定义事件
	tips.on('click', function(){
		var index = $(this).index();
		wrap.triggerHandler('move_to', index);		
	});

     3.具体的操作流程：

	//预定义
	var current = 0;
	var size = items.length;
	var width = items.eq(0).width();

	//设置自动滚动参数
	var autoPlay = true;

	ui
	.on('mouseover', function(){
        //鼠标移入图片中时停止轮播
		autoPlay = false;
	})
	.on('mouseout', function(){
        //鼠标移出图片区域时进行自动轮播
		autoPlay = true;
	})

	//具体操作
	wrap
	.on('move_prev', function(){
		if(current <= 0){
            //如果在第一张图片上单击向左箭头时，切换到最后一张
			current = size;
		}
		current--;
		wrap.triggerHandler('move_to', current);
	})
	.on('move_next', function(){
		if(current >= (size-1)){
            //在最后一张图片上单击向右箭头时，自动切换回第一张图片
			current = -1;
		}
		current++;
		wrap.triggerHandler('move_to', current);
	})
	.on('move_to', function(evt, index){
		wrap.css('left', index*width*-1);
        //跳转到对应页面时，对应的小圆点处于选中状态
		tips.removeClass('focus').eq(index).addClass('focus');
	})
	.on('auto_move', function(){
		setInterval(function(){
            //只有当autoPlay为真时，才进行自动轮播
			autoPlay && wrap.triggerHandler('move_next')
		}, 2000);
	})
	.triggerHandler('auto_move')

    结束语：此轮播图未设置无缝切换，若有该需求，请参考其他技术文章