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

js幻灯片焦点图特效代码

发布时间:2017-02-28 13:03:42    您是第0位浏览者

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

js幻灯片焦点图特效代码

js幻灯片焦点图特效代码

var i=0;
var stop;

//每隔2秒运行一次轮播
stop=setInterval(function(){
	i++;
	if(i>6){
		i=1;
	}
	xiaoguo2(i);
	xiaoguo(i);
},4000)

//动作函数
function xiaoguo2(n){
	$('.fugai1')
	.css({"background-image":"url(image/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})
	.animate({"backgroundPosition-x":-730+'px'},3000)
	.css({'display':'none'})

	//块二
	$('.fugai2')
	.css({"background-image":"url(image/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":-200+'px'})
	.animate({"backgroundPosition-x":-730*2+'px'},3000)
	.animate({'display':'none'})

	//块三
	$('.fugai3')
	.css({"background-image":"url(image/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'})
	.animate({"backgroundPosition-x":-730*3+'px'},3000)
	.animate({'display':'none'})
}

$('.list-li>li').eq(0).css({'background-color':'orange'})
function xiaoguo(n){
	var b=n-1;	
	$('.list-li>li').css({'background-color':'#F9263E'})	
	$('.list-li>li').eq(b).css({'background-color':'orange'})
	$('.dian').animate({'width':730+'px'},2000)
	$('.dian').animate({'width':0+'px'},100)
	$('.box').animate({'margin-left':-n*730+'px'},2000,function(){
		if(n==6){
			$('.box').css({'margin-left':0+'px'})
		}
	})
}

//左右按钮
function huan(n){
	var j=i;
	i=i+n;
	
	if(i>6){
		i=1;
	}
	if(i<0){
		i=5;
	}
	xiaoguo(i);
}

//左箭头
$('.btn-l').click(function(){
clearInterval(stop);
	stop=null;			
		huan(-1);	
		if(i==0){
			$('.btn-con-l').html('<img src="image/lunbo'+parseInt(6)+'.jpg">')
		}else{
			$('.btn-con-l').html('<img src="image/lunbo'+parseInt(i)+'.jpg">')
		}
		$('.box').stop(true,true);
		$('.dian').stop(true,true);
		
});

//右箭头
$('.btn-r').click(function(){
	clearInterval(stop);
	stop=null;
		huan(1);			
		if(i==5){
			$('.btn-con-r').html('<img src="image/lunbo'+parseInt(1)+'.jpg">')
		}else if (i==6) {
			$('.btn-con-r').html('<img src="image/lunbo'+parseInt(2)+'.jpg">')
		}else{
			$('.btn-con-r').html('<img src="image/lunbo'+parseInt(i+2)+'.jpg">')
		}
		$('.box').stop(true,true);
		$('.dian').stop(true,true);
});

//鼠标放上大块
$('.lunbo').mouseover(function(){
	clearInterval(stop);
	stop=null;
	$('.btn').show();

})

//鼠标离开大块
$('.lunbo').mouseout(function(){
	if(stop==null){
		stop=setInterval(function(){
			i++;
			if(i>6){
				i=1;
			}
			xiaoguo(i);
			xiaoguo2(i);
		},4000)			
	}
	$('.btn').hide();
	$('.btn-con-l').text('');
	$('.btn-con-r').text('');
})

//按钮小标题
$('.list-li>li').mouseover(function(){		
	clearInterval(stop);
	stop=null;
	i= Number($(this).text());
	xiaoguo($(this).text())
	$('.box').stop(true,true);
	$('.dian').stop(true,true);
})



幻灯片 焦点图

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

友荐云推荐
大家说 此评论不代表本站观点