js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS广告代码 > JS幻灯片

JS带图片标题自动播放的幻灯片特效

发布时间:2015-08-29 20:10:30    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

JS带图片标题自动播放的幻灯片特效
(function(id,t){
	if(!document.getElementById(id)){return false;}
	var doc = document,
		auto='',
		oId = doc.getElementById(id),
		IE = /msie (\d+\.\d)/i.test(navigator.userAgent),
		num = 0,
		bot = true,
		setOpacity = function(obj, opacity){
			if(IE){
				obj.style.filter = 'Alpha(Opacity=' + (opacity * 100) + ')';	
			}
			else{
				obj.style.opacity = opacity;
			};
		},
		setBottom = function(obj, bottom){
			obj.style.bottom = bottom + 'px';
		},
		fideIn = function(obj, timeLimit){
			if(obj.style.display === 'none'){
                obj.style.display = 'block';
            };
            setOpacity(obj, 0);
			obj.style.zIndex = 1;
            if(!timeLimit){
                timeLimit = 200;
            };
            var opacity = 0,
            step = timeLimit / 20;
            clearTimeout(fideInTime);
            var fideInTime = setTimeout(function(){
				bot = false;
                if(opacity >= 1){
					bot = true;
                    return;
                };
                opacity += 1 / step;
                setOpacity(obj, opacity);
                fideInTime = setTimeout(arguments.callee, 20);
            },20);
		},
		fideOut = function(obj, timeLimit){
			if(!timeLimit){
				timeLimit = 200;
			};
			setOpacity(obj, 1);
			obj.style.zIndex = 0;
			var opacity = 1,
			step = timeLimit / 20;
			clearTimeout(fideOutTime);
			var fideOutTime = setTimeout(function(){
				if (opacity <= 0) {
					setOpacity(obj, 0);
					return;
				};
				opacity -= 1 / step;
				setOpacity(obj, opacity);
				fideOutTime = setTimeout(arguments.callee, 20);
		
			},20);
		},
		heightIn = function(obj, timeLimit){
			if(obj.style.display === 'none'){
                obj.style.display = 'block';
            };
            setBottom(obj, -40);
            if(!timeLimit){
                timeLimit = 200;
            };
            var bottom = -40,
            step = timeLimit / 20;
            clearTimeout(heightInTime);
            var heightInTime = setTimeout(function(){
                if(bottom >= 8){
					setBottom(obj, 8);
                    return;
                };
                bottom += 28 / step;
                setBottom(obj, bottom);
                heightInTime = setTimeout(arguments.callee, 20);
            },20);
		},
		heightOut = function(obj, timeLimit){
			if(!timeLimit){
                timeLimit = 200;
            };
			setBottom(obj, 8);
			var bottom = 8,
			step = timeLimit / 20;
			clearTimeout(heightOutTime);
			var heightOutTime = setTimeout(function(){
                if(bottom <= -40){
					setBottom(obj, -40);
                    return;
                };
                bottom -= 28 / step;
                setBottom(obj, bottom);
                heightOutTime = setTimeout(arguments.callee, 20);
            },20);
		},
		getClass = function(oElem, strTagName, strClassName){   
			var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : oElem.getElementsByTagName(strTagName);
			var returnArrElements = new Array();   
			var oRegExp =  new RegExp('(^|\\s)' + strClassName + '($|\\s)');   
			for(var i=0; i<arrElements.length; i++){   
				if(oRegExp.test(arrElements[i].className)){   
					returnArrElements.push(arrElements[i]);   
				}   
			}   
			return (returnArrElements);
		},
		createElement = function(tag, id, cla){
			var elem = document.createElement(tag);
			if(id && id !== ""){
				elem.id = id;
			}
			if(cla && cla !== ""){
				elem.className = cla;
			}
			return elem;
		},
		showImg = function(n,b){
			var turnPic = getClass(oId,'ul','turn-pic')[0];
			var oLi = turnPic.getElementsByTagName('li');
			var turnTit = getClass(oId,'ul','turn-tit')[0];
			var oLi2 = turnTit.getElementsByTagName('li');
			var turnBtn = getClass(oId,'div','turn-btn')[0];
			var oSpan = turnBtn.getElementsByTagName('span')[0];
			fideIn(oLi[n],300);
			heightIn(oLi2[n],300);
			oSpan.innerHTML = (n+1)+'/'+oLi.length;
			if(b==true){
				if(n==oLi.length-1){
					fideOut(oLi[0],300);
					heightOut(oLi2[0],300);
				}
				if(n<oLi.length-1){
					fideOut(oLi[n+1],300);
					heightOut(oLi2[n+1],300);
				}
			}
			else{
				if(n>0){
					fideOut(oLi[n-1],300);
					heightOut(oLi2[n-1],300);
				}
				if(n==0){
					fideOut(oLi[oLi.length-1],300);
					heightOut(oLi2[oLi2.length-1],300);
				}
			}
		},
		addHtml = function(){
			var oBg = createElement('div','','turn-bg');
			var oTit = createElement('ul','','turn-tit');
			var oBtn = createElement('div','','turn-btn');
			var turnPic = getClass(oId,'ul','turn-pic')[0];
			var oA = turnPic.getElementsByTagName('a');
			var oImg = turnPic.getElementsByTagName('img');
			for(var i=0,len=oA.length;i<len;i++){
				oTit.innerHTML += '<li><a href="'+ oA[i].href +'">'+ oImg[i].title +'</a></li>';
			}
			oBtn.innerHTML = '<div class="lb"></div><div class="rb"></div><span></span>';
			oId.appendChild(oBg);
			oId.appendChild(oTit);
			oId.appendChild(oBtn);
		},
		init = function(){
			addHtml();
			showImg(0);
			var turnLoading = getClass(oId,'div','turn-loading')[0];
			oId.removeChild(turnLoading);
			oId.onmouseover = function(){
				clearInterval(auto);
			};
			oId.onmouseout = function(){
				auto = setInterval(autoTurn, t*1000);
			};
			var turnPic = getClass(oId,'ul','turn-pic')[0];
			var oLi = turnPic.getElementsByTagName('li');
			var oLb = getClass(oId,'div','lb')[0];
			var oRb = getClass(oId,'div','rb')[0];
			oLb.onmouseover = function(){
				this.style.backgroundPosition = '-12px 0';
			}
			oLb.onmouseout = function(){
				this.style.backgroundPosition = '0 0';
			}
			oLb.onclick = function(){
				if(!bot){ return false; }
				if(num==0){
					num = oLi.length-1;
				}
				else{
					num = num - 1;
				}
				showImg(num,1);
			}
			oRb.onmouseover = function(){
				this.style.backgroundPosition = '-18px 0';
			}
			oRb.onmouseout = function(){
				this.style.backgroundPosition = '-6px 0';
			}
			oRb.onclick = function(){
				if(!bot){ return false; }
				if(num==oLi.length-1){
					num = 0;
				}
				else{
					num = num + 1;
				}
				showImg(num);
			}
		},
		autoTurn=function(){
			var turnPic = getClass(oId,'ul','turn-pic')[0];
			var oLi = turnPic.getElementsByTagName('li');
			if(num==oLi.length-1){
				num = 0;
			}
			else{
				num = num + 1;
			}
			showImg(num);
		};
		init();
		auto = setInterval(autoTurn, t*1000);
})('turn',3);



幻灯片 图片 自动播放

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

JS仿360旅游首页幻灯片效果代码

JS带图片标题自动播放的幻灯片特效

JS视差滑块幻灯片特效

jQuery自动播放淡入淡出的幻灯片特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿淘宝首页缓冲幻灯片特效

jquery实现4款自定义图片切换幻灯片js特效

jquery仿支付宝全屏图片幻灯片淡出淡进切换特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现 ChinaJoy2014专题幻灯片特效

jQuery幻灯片插件,按钮控制图片过渡特效

jquery仿百度百科2014新首页幻灯片特效

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效

jquery仿腾讯新闻网站带缩略图的幻灯片切换代码_js代码

jquery仿搜狐2014巴西世界杯专题幻灯片特效

jquery仿新浪2014成都车展幻灯片

jquery仿网易2014巴西世界杯专题幻灯片特效

jquery仿腾讯网新闻图片特效带缩略图的幻灯片切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jqzoom仿京东商品详细页产品图片放大镜特效

jquery实现图片相册淡入淡出特效插件

jquery实现全屏图片左右滚动预览焦点图特效

js、html5实现极速3D立体式图片相册切换效果

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

jQuery+CSS3 实现动画图片相册,大图全屏展示,前后翻页特效代码

Css3鼠标悬停图片高亮特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

query自适应图片高度并带播放提示的相册特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

JS仿腾讯娱乐图片频道满屏左右切换焦点图特效

jQuery仿QQ空间鼠标感应上下滚动预览图片特效

jQuery多张图片相册上下切换,放大预览等特效

jquery实现鼠标移动到图片上显示大图广告特效

jQuery动态加载图片相册,弹窗大图特效

jquery实现led广告牌旋转图片切换特效

jquery实现会滚动的新闻列表和图片滚动特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

jquery焦点选项卡图片切换特效,支持自动播放