Banner广告大图纯jquery切换与小栏目图片滑入,jquery.focusslider插件应用

分类:jquery实践

jquery.focusslider.min.js下载地址: /demo/js/jquery.focusslider.min.js

 

$(function(){
	//Banner广告图切换
	var obj_banner = $(".bannerIndex > ul");
	var obj_banner_prev = $(".banner_prev");
	var obj_banner_next = $(".banner_next");
	var obj_LiCount = obj_banner.find("li").size();
	var obj_Li_CurrentIndex = 0;
	var obj_banner_show = function(i){
		    obj_banner.find("li:eq("+i+")").fadeIn().siblings().hide();
		}
	obj_banner_prev.click(function(){
		    (obj_Li_CurrentIndex<=0)?obj_Li_CurrentIndex=parseInt(obj_LiCount-1) : obj_Li_CurrentIndex-=1;
			 obj_banner_show(obj_Li_CurrentIndex);
								});
	obj_banner_next.click(function(){
		    (obj_Li_CurrentIndex>=parseInt(obj_LiCount-1))?obj_Li_CurrentIndex=0 : obj_Li_CurrentIndex+=1;
			 obj_banner_show(obj_Li_CurrentIndex);
								}); 
	if(obj_LiCount>1)
	{
	var autoclick = function(){obj_banner_next.trigger("click");}
	var btspeed = 5; //间隔时间5秒
	var bt = window.setInterval(autoclick,btspeed*1000);
	$(".bannerIndex").hover(function(){window.clearInterval(bt);obj_banner_prev.show();obj_banner_next.show();},function(){bt = window.setInterval(autoclick,btspeed*1000);obj_banner_prev.hide();obj_banner_next.hide();});
	}
	//企业新闻 图片滚动	   
    $(".ind-slider").FocusSlider({
								 thum_Event:"mouseover", 
								 btn_img_left:"/resources/images/bgArt.png",
								 btn_img_right:"/resources/images/bgArt.png",
								 btn_pos_left:"0px -88px",
								 btn_pos_right:"-17px -88px",
								 btn_distance:-22,
								 auto:true, 
								 visible:1,
								 roll:1
								 });
	//优酷视频
	$(".video-slider").FocusSlider({
								 thum_Event:"mouseover", 
								 btn_img_left:"/resources/images/bgArt.png",
								 btn_img_right:"/resources/images/bgArt.png",
								 btn_pos_left:"0px -88px",
								 btn_pos_right:"-17px -88px",
								 btn_distance:0,
								 thum_open:false,
								 visible:4,
								 roll:1,
								 btn_online:false,
								 distance:19 
								 });
	$(".video-slider ul").find("a").click(function(){
								 var datasrc = $(this).attr("datasrc");
								 var str = "<embed flashvars=\"isAutoPlay=true\" src=\""+datasrc+"\" allowFullScreen=\"true\" quality=\"high\" width=\"390\" height=\"280\" align=\"middle\" allowScriptAccess=\"always\" type=\"application/x-shockwave-flash\" wmode=\"transparent\"></embed>";
								 $(".youku").html(str); 
											   });
	//会员专区 图标抖动
	$(".member_ico a").each(function(k,img){ 
		new JumpObj(img,10);
		//第一个参数代表元素对象
		//第二个参数代表抖动幅度
	});	
	//广告图
	$(".ad-slider").FocusSlider({
								 thum_Event:"mouseover",
								 vertical:false,
								 btn_img_left:"/resources/images/bgArt.png",
								 btn_img_right:"/resources/images/bgArt.png",
								 btn_pos_left:"0px -88px",
								 btn_pos_right:"-17px -88px",
								 btn_distance:0,
								 auto:true, 
								 visible:1,
								 roll:1
								 });
	//品牌标签
	var obj_brandcontent = $(".brandcontent > ul");
	var obj_LI_W = obj_brandcontent.find("li:first").width();
	$(".brandcatalog > ul > li").mouseover(function(){
								var index = $(this).index(); 
								obj_brandcontent.stop(true,false).animate({"margin-left":-1*parseInt(obj_LI_W*index)+"px"},800);
								$(this).addClass("current").siblings().removeClass("current");}); 
	//十大王牌
	var shida_currentIndex = 0;
	var obj_shida = $(".shida").find("li");
	obj_shida.mouseover(function(){
							 var index = obj_shida.index($(this));
							 if(index!=shida_currentIndex || shida_currentIndex==0){
								 shida_currentIndex = index; 
								 obj_shida.removeClass("current");
								 $(this).addClass("current"); 
								 $(".shida dl dd:eq("+index+")").show().siblings().hide();
							 }});
	(!obj_shida.eq(0).hasClass("current"))&&(obj_shida.eq(0).trigger("mouseover")); 
	//加盟合作图片滚动
	$(".league-slider").FocusSlider({
								 thum_Event:"mouseover",
								 vertical:false,
								 btn_img_left:"/resources/images/bgArt.png",
								 btn_img_right:"/resources/images/bgArt.png",
								 btn_pos_left:"0px -88px",
								 btn_pos_right:"-17px -88px",
								 btn_distance:5,
								 auto:true,
								 thum_open:false,
								 visible:1,
								 roll:1,
								 btn_online:false
								 });
	//优秀店图片滚动
	var obj_sphoto = $(".sphoto > ul");
	obj_sphoto.css("cursor","pointer").click(function(){window.location.href="/shop-photo.htm";});
	if(obj_sphoto.find("li").size()>7){
		obj_sphoto.find("li").clone().appendTo(obj_sphoto);
	var obj_LI_H = parseInt(obj_sphoto.find("li:first").outerHeight())+parseInt(obj_sphoto.find("li:first").css("margin-bottom").replace("px",""));
	var obj_speed = 5; //滚动时间间隔3秒
	var autoscroll = function(){
		    obj_sphoto.stop(true,false).animate({"margin-top":-1*obj_LI_H*2+"px"},800,function(){$(this).find("li:lt(8)").appendTo(this);$(this).css("margin-top","0px");});
		}
	var t1 = window.setInterval(autoscroll,obj_speed*1000);
	obj_sphoto.hover(function(){window.clearInterval(t1);},function(){t1 = window.setInterval(autoscroll,obj_speed*1000);});
	} 
})

 

本文链接: Banner广告大图纯jquery切换与小栏目图片滑入,jquery.focusslider插件应用
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.