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

js实现图片幻灯片焦点图左右滚动、带箭头的可控制滚动特效代码

发布时间:2017-02-27 13:01:15    您是第0位浏览者

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

js实现图片幻灯片焦点图左右滚动、带箭头的可控制滚动特效代码

js实现图片幻灯片焦点图左右滚动、带箭头的可控制滚动特效代码

!
function() {
	//获取图片的下标长度
	$(".img-box").width($(".img-box img").length * 790);
	//初始化
	var n = 0;

	function run() {
		if (n < $(".img-box img").length - 1) {
			n += 1;
		} else {
			n = 1;
			$(".img-box").css({
				marginLeft: 0
			});
		}
		$(".img-box").animate({
			marginLeft: -790 * n
		}, 500);
		$(".btn li").removeClass("Red");
		if (n == $(".img-box img").length - 1) {
			$(".btn li").eq(0).addClass("Red");
		} else {
			$(".btn li").eq(n).addClass("Red");
		}
	}
	//设置定时器		
	var Timer = setInterval(run, 4000);
	$(".btn li").hover(function() {
		clearInterval(Timer);
		//获取图片的位置
		n = $(".btn li").index(this);
		$(".img-box").animate({
			marginLeft: -790 * n
		}, 500);
		$(".btn li").removeClass("Red").eq(n).addClass("Red");
	}, function() {
		Timer = setInterval(run, 4000);
	});
}();

!
function() {
	$(".container img .container dd").hide().first().show();
	//$(".container img,.container dd").hide();
	//$(".container img:eq(0),.container dd:eq(0)").show();
	var n = 0;

	function run() {
		if (n < $(".container img").length - 1) {
			n += 1
		} else {
			n = 0;
		}
		$(".container img,.container dd").hide();
		$(".container img:eq(" + n + "),.container dd:eq(" + n + ")").show();
	}
	var setTimer = setInterval(run, 3000);
	//鼠标经过控制轮换图的动态
	$(".container").hover(function() {
		clearInterval(setTimer);
	}, function() {
		setTimer = setInterval(run, 3000);
	});

	//	左箭头控制焦点图
	$(".arrow-left").click(function() {
		if (n > 0) {
			n -= 1
		} else {
			n = ($(".container img").length - 1);
		}
		$(".container img,.container dd").hide();
		$(".container img:eq(" + n + "),.container dd:eq(" + n + ")").show();
	});

	// 右箭头控制焦点
	$(".arrow-right").click(function() {
		if (n < $(".container img").length - 1) {
			n += 1;
		} else {
			n = 0;
		}
		$(".container img,.container dd").hide();
		$(".container img:eq(" + n + "),.container dd:eq(" + n + ")").show();
	});
}();



幻灯片 焦点图 箭头

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

仿车轮网带左右滚动JS焦点图轮播特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

仿OPPO官方商城jquery焦点图特效

jquery仿淘宝新版首页焦点图特效

jQuery仿迅雷动漫左右滚动焦点图特效

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

jQuery仿新浪大片首页焦点图滚动特效

jquery左右切换,带文字说明的焦点图特效

jquery仿京东商城首页焦点图

jquery竖向tab切换焦点图特效

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

jQuery实现可自动播放焦点图特效

js仿腾讯视频网站焦点图特效

jQuery仿2012QQ商城焦点图特效

jQuery仿百度统计可自动播放焦点图特效

jquery quake Slider一款集成多种超炫切换效果的焦点图特效

jquery仿2014南宁45届世锦赛首页焦点图特效

jquery纯色调支持缩略图和描述的焦点图特效

jQuery带缩略图焦点图插件