js輪播功能 標籤自動切換 同頁面多輪播js

須要加入jquery 1.43及以上版本

下面還有個簡單版，一個頁面只支持一個輪播

同頁面多輪播js

<div>
    <div class="yt_content">
        <ul class="ml_content_main ml_content_main_word ms__div">
            <div class="cb"></div>
        </ul>
        <ul class="ml_content_main ml_content_main_word ms__div" style="display: none;">
            <div class="cb"></div>
        </ul>
    </div>
    <a href="javascript:void(0);" class="yt_left" onclick="_ms_active_continue('index','-')" id="yjq_prev">上一頁</a>
    <a href="javascript:void(0);" class="yt_right" onclick="_ms_active_continue('index','+')" id="yjq_next">下一頁</a>
</div>


<div class="yl_main">
    <ul class="ml_content_main ml_content_main_word ms__div2">
        <li><a href="#">鏈接1</a></li>
    </ul>
    <ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
        <li><a href="#">鏈接1</a></li>
    </ul>
    <ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
        <li><a href="#">鏈接1</a></li>
    </ul>
</div>

 

//執行動畫
	/*
	indexName 輪播ID
	className 分組的樣式表名稱，自定義的不是美工設計的，使用美工的樣式名，若是他更新輪播就會失效
	time 每次執行的間隔時間
	prev_id 上一頁按鈕ID
	next_id 下一頁按鈕ID
	 */
	function _ms_run(indexName,className,time,prev_id,next_id) {
		if(!window["_ms_"+indexName]||parseInt(window["_ms_"+indexName])<0){//第一次當前顯示序號沒有值或小於0，則賦值0，
			window["_ms_"+indexName]=0;
		}
		window["_ms_"+indexName] = ""+(parseInt(window["_ms_"+indexName])+1);
		var div=$("."+className);//獲取要管理的class組，其餘能夠本身弄
	    if (window["_ms_"+indexName] > div.length) {//判斷若是超過最大序號則調整到第一個
	        window["_ms_"+indexName] = 1;
	    }
	    var index=window["_ms_"+indexName];
		
	    for (var i = 1; i <= div.length; i++) {
	        $(div[i-1]).hide();//隱藏全部容器
	    }	    
	    $(div[index-1]).show();//顯示容器
	    if(index==1&&prev_id){//顯示第一個時，隱藏上一頁圖片
	    	$("#"+prev_id).hide();
	    }else if(index!=1&&prev_id){
	    	$("#"+prev_id).show();
	    }
	    if(index==div.length&&next_id){//顯示最後一個時，隱藏下一頁圖片
	    	$("#"+next_id).hide();
	    }else if(index!=div.length&&next_id){
	    	$("#"+next_id).show();
	    }
	    //執行下次動畫
	    window["_ms_clear_"+indexName] = setTimeout(function () {
	        _ms_run(indexName,className,time,prev_id,next_id)
	    }, time);
	}
	//暫時清除動畫效果
	function _ms_stop(indexName) {
	    clearTimeout(window["_ms_clear_"+indexName]);
	}
	//繼續執行動畫效果
	function _ms_active_continue(indexName,activeType) {
	    clearTimeout(window["_ms_clear_"+indexName]);
	    if (activeType) {	        
	        if(activeType=="+"){//下一頁
	        	//index = num;
	        }else if(activeType=="-"){//上一頁
	        	window["_ms_"+indexName] -= 2;
	        }
	        _ms_runset(indexName);
	    } else {
	        window["_ms_clear_"+indexName] = setTimeout(function () {
	            _ms_runset(indexName)
	        }, time);
	    }
	}
	//配置每一個輪播屬性
	function _ms_runset(keyName){
		/* _ms_run函數說明
		indexName 輪播ID
		className 分組的樣式表名稱,自定義的不是美工設計的，使用美工的樣式名，若是他更新輪播就會失效
		time 每次執行的間隔時間
		prev_id 上一頁按鈕ID
		next_id 下一頁按鈕ID
		 */
		switch(keyName){
			case "index":
				_ms_run('index', 'ms__div',30000,'yjq_prev','yjq_next');
				break;
			case "index2":
				_ms_run('index2','ms__div2',10000,'','');
			break;
			case "index3":
				_ms_run('index3','ms__div3',10000,'','');
			break;
		}
	}
	//第一次須要執行的輪播任務
	setTimeout(function(){
		 _ms_runset('index','--');
		 _ms_runset('index2','--');
		 _ms_runset('index3','--');
	},10000);

　　

 

簡單版，一個頁面只能有一個

 <div class="bd" onmouseover="stop()" onmouseleave="a_click()">

<div class="img" id="img_1"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>圖片標題呢</span></a></div>
<div class="img" id="img_2"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>圖片標題呢2</span></a></div>
<div class="img" id="img_3"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>圖片標題呢3</span></a></div>
<div class="numbar">
<a href="javascript:void(0)" id="img_a_1" onclick="a_click(1)">1</a>
<a href="javascript:void(0)" id="img_a_2" onclick="a_click(2)">2</a>
<a href="javascript:void(0)" id="img_a_3" onclick="a_click(3)">3</a>
</div>
</div>

<script type="text/javascript">
var index=0;
var _settimeout;
function run(){
for (var i = 1; i < 4; i++) {
$("#img_"+i).hide();
$("#img_a_"+i).removeClass("active");
}
index+=1;
if(index>3){
index=1;
}
$("#img_"+index).show();
$("#img_a_"+index).addClass("active");
_settimeout=setTimeout(function(){run()},3000);
}
function stop(){
clearTimeout(_settimeout);
}
function a_click(num){
if(num){
clearTimeout(_settimeout);
index=num-1;
run();
}else{
_settimeout=setTimeout(function(){run()},3000);
}

}
$(function(){
run();
})
</script>