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" οnclick="_ms_active_continue('index','-')" id="yjq_prev">上一页</a>
    <a href="javascript:void(0);" class="yt_right" οnclick="_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" οnmοuseοver="stop()" οnmοuseleave="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" οnclick="a_click(1)">1</a>
<a href="javascript:void(0)" id="img_a_2" οnclick="a_click(2)">2</a>
<a href="javascript:void(0)" id="img_a_3" οnclick="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>

 

 

转载于:https://www.cnblogs.com/jiangchongwei/p/4759332.html