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

js实现带焦点的上下滚动、左右滚动的幻灯片焦点图特效代码实例

发布时间:2017-02-27 12:29:29    您是第0位浏览者

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

js实现带焦点的上下滚动、左右滚动的幻灯片焦点图特效代码实例

js实现带焦点的上下滚动、左右滚动的幻灯片焦点图特效代码实例

$(document).ready(function(){
	(function(){
		// 左右滑动 leftright()
		function lr(){
			var num=0;
			var asd=0;
			var length=$('.banner li').length;
			// console.log(length)
			var clock;
			clock=setInterval(auto,3000)
			function auto(){
				asd=num;
				num+=1;
				if(num>=length){
					num=0
				}
				change();
			}
			function change(){
				$('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');
				$('.left ul li').eq(asd).animate({left:'-300px'},1000,function(){
					$(this).css('left','300px')
				}).removeClass('top');

				$('.left ol li').css('background','white');
				$('.left ol li').eq(num).css('background','black');
			};
			$('.left ol li').click(function(){
				asd=num;
				clearInterval(clock);
				num=$(this).index();
				if(num<asd){
					$('.left ul li').eq(num).css('left','-300px');
					$('.left ul li').eq(asd).animate({left:'300px'},1000).removeClass('top');
					$('.left ul li').eq(num).animate({left:'0px'},1000).addClass('top');

					$('.left ol li').css('background','white');
					$('.left ol li').eq(num).css('background','black');
				}else if(num==asd){
					return false;
				}else{
					change();
				};
				
				clock=setInterval(auto,3000);
			});
			$('.left').mouseover(function(){
				clearInterval(clock);
			});
			$('.left').mouseout(function(){
				clearInterval(clock);
				clock=setInterval(auto,3000);
			});
		};

		// 上下滑动 updown()
		function ud(){
			var num2=0;
			var asd2=0;
			var length2=$('.banner2 li').length;
			var clock2;	
			clock2=setInterval(auto2,3000)
			function auto2(){
				asd2=num2;
				num2+=1;
				if(num2>=length2){
					num2=0
				}
				change2();
			}
			function change2(){
				$('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');
				
				$('.up ul li').eq(asd2).animate({top:'300px'},1000,function(){
					$(this).css('top','-300px')
				}).removeClass('top');
			
				$('.up ol li').css('background','white');
				$('.up ol li').eq(num2).css('background','black');
			};
			$('.up ol li').click(function(){
				asd2=num2;
				clearInterval(clock2);
				num2=$(this).index();
				if(num2<asd2){
					$('.up ul li').eq(num2).css('top','300px');
					$('.up ul li').eq(asd2).animate({top:'-300px'},1000).removeClass('top');
					$('.up ul li').eq(num2).animate({top:'0px'},1000).addClass('top');
					$('.up ol li').css('background','white');
					$('.up ol li').eq(num2).css('background','black');
				}else if(num2==asd2){
					return false;
				}else{
					change2()
				};
				clock2=setInterval(auto2,3000);
			});
			$('.up').mouseover(function(){
				clearInterval(clock2);
			});
			$('.up').mouseout(function(){
				clearInterval(clock2);
				clock2=setInterval(auto2,3000);
			});
		};
		lr();
		ud();
	})();
});		



幻灯片 焦点图

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仿腾讯网新闻图片特效带缩略图的幻灯片切换特效