js轮播功能 标签自动切换 同页面多轮播js

需要加入jquery 1.43及以上版本

下面还有个简单版，一个页面只支持一个轮播

同页面多轮播js

    

        

            

        
        

            

        
    
    上一页
    下一页




    

        
连接1
    
    

        
连接1
    
    

        
连接1
    

 

//执行动画
	/*
	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);

　　

 

简单版，一个页面只能有一个

 

图片标题呢

图片标题呢2

图片标题呢3

1
2
3

 

 

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