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')

    結束語：此輪播圖未設置無縫切換，若有該需求，請參考其他技術文章