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

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

发布时间:2015-09-06 15:31:50    您是第0位浏览者

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

jquery实现淡出淡入带缩略图的广告图片幻灯片切换特效
$(function(){
	allHome();	
});

function allHome(){
	$('a').focus(function(){
		$(this).blur();
	});
	changeImages(5);
    $('#small_imgs a.item:first').find('div.img').addClass('active');
	var allimg = $('#small_imgs .img');
	var big_img = $('#big_img');
	var big_a = $('#big_a');
	var small_next = $('#small_next');
	var stop2 = false;
	allimg.mouseover(function(){
		if($(this).hasClass('active'))return;
		allimg.removeClass('active');
		$(this).addClass('active');
		var img = $(this).attr('b');
		var link = $(this).attr('l');
		var theid = $(this).attr('theid');
		if(big_img.queue('fx').length!=0){
			big_img.stop(true);
		}
		big_img.animate({'opacity':'0.2'},400,function(){
			big_img.css('background-image','url('+img+')');
			if(link==''){
				big_a.attr('href','javascript:;').attr('onClick',"pgvSendClick({hottag:'HRTENCENT.HOME.BANNER.BANNER"+theid+"'});").addClass('cdefault');
			}else{
				big_a.attr('href',link).attr('onClick',"pgvSendClick({hottag:'HRTENCENT.HOME.BANNER.BANNER"+theid+"'});").removeClass('cdefault');
			}
			big_img.animate({'opacity':'1'},700);
		});
	});
	allimg.eq(0).removeClass('active');
    allimg.eq(0).mouseover();
	$('#home_banner').mouseover(function(){
		stop2=true;
	}).mouseout(function(){
		stop2=false;
	});
	
	var marquee2 = autoSwitchHomeBanner(allimg);
	MyMar2 = setInterval(marquee2,6000);
	function autoSwitchHomeBanner(allimg){
		return (function(){
			if(stop2)return;
			var index = 0;
			$('#small_imgs .img').each(function(i){
				if($(this).hasClass('active')){
					index = i;return false;
				}
			});
			if(index>=4){
				small_next.click();
			}
			var next = $('#small_imgs .img.active:first').parent().next().find('.img');
			if(next.length==0){
				next = allimg.eq(0);
			}
			next.mouseover();
			stop2 = false;
		});
	}
	
}

function changeImages(allowl) {
	var itemall = $('#small_imgs .item');
	iteml = itemall.length;
	if (iteml <= allowl) {
		$('#small_pre,#small_next').css('background', 'none');
		return;
	}
	iteml = ((iteml - allowl) > allowl) ? allowl : (iteml - allowl);
	imagesSwitch33('#small_pre', '#small_next', itemall, 900, iteml);
}

function imagesSwitch33(left, right, items, movetime, num) {
	movetime = (parseInt(movetime)) ? movetime : 400;
	items.parent().css({
		position : 'relative',
		overflow : 'hidden'
	});
	items.parent().wrapInner('<div></div>');
	items.parent().css('position', 'absolute');
	items.parent().css('left', '0');
	var offw = items.eq(0).outerWidth(true);
	var allw = items.outerWidth(true) * (items.length);
	var movew = offw * num;
	items.parent().width(allw + 'px');
	var len = items.length;
	var isclick = false;

	jQuery(left).click(function() {
		if (items.parent().queue('fx').length != 0)
			return;
		isclick = true;
		items.parent().prepend(items.parent().children().slice(len - num, len));
		items.parent().css('left', '-' + movew + 'px');
		items.parent().animate({
			left : '+=' + movew + 'px'
		}, movetime, function() {
			items.parent().css('left', 0);
		});
	});
	jQuery(right).click(function() {
		if (items.parent().queue('fx').length != 0)
			return;
		isclick = true;
		items.parent().animate({
			left : '-=' + movew + 'px'
		}, movetime, function() {
			items.parent().append(items.parent().children().slice(0, num));
			items.parent().css('left', 0);
		});
	});
}



缩略图 切换 幻灯片

jquery带缩略图焦点滚动图特效代码

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

jquery仿UC浏览器网站带缩略图淡入淡出的banner特效

jquery仿海信官网带缩略图下拉导航菜单特效

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

jQuery带缩略图焦点图插件

jQuery实现左右布局带缩略图轮播图特效

jquery实现带缩略图可触摸焦点图特效

jquery实现宽屏带缩略图焦点图

jquery实现带缩略图,按钮控制图片左右滑动切换特效

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

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

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

jQuery实现带缩略图广告特效代码

JQuery实现带缩略图的焦点图展示特效

jQuery实现门户网站带缩略图的图片相册特效代码

jquery鼠标悬停缩略图、实现放大跟随展示大图片特效代码

jQuery带缩略图的全屏幻灯片图片切换特效代码

有缩略图5屏焦点图切换

有缩略图和文字描述的JS焦点图代码

jquery选项卡切换,版块鼠标跟随边框变色特效

tab选项卡切换特效并且带更多按钮

仿红木之家官网首页jquery焦点全屏大图切换特效

jquery顶部导航菜单下拉,左侧分类切换特效

12宫格点击城市切换地区滚动特效

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

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

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

jquery点击切换,3d淡入动画,头像相册特效

jquery实现网页右下角向上弹出广告代码,支持tab切换

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

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

jquery左右多图全屏拖拽以及点击弹窗多图切换效果

jquery左右布局的缓动Tab切换选项卡特效

jquery竖向tab切换焦点图特效

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

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