닫기
이전 다음

NOTICE

새로움을 향한 설.레.임

jquery 간단배너, 페이드인(메인배너,제품배너)

페이지 정보

작성자 홈피사랑 작성일14-07-19 14:06 조회6,707회 댓글0건

본문

 

간단한 배너 소스 입니다.

상단 배열에 이미지 경로및 링크경로를 수정해 주시면 됩니다.

 

 

예제소스

 

var bannerAry = ["img/visual_01.jpg","img/visual_02.jpg","img/visual_03.jpg"];
var bannerLinkAry = ["#1","#2","#3"];
var bannerLoadCount = 0;
var bannerMax;

var visualInterval;
var visualIntervalTime = 3500;

var curNum = 0;


jQuery(function()

 bannerInit();
} );
function bannerInit(){
 var len = bannerAry.length;
 bannerMax = len;
 var img_str = "<div class='img_list'><ul>";
 var btn_str = "<div class='btn_list'><ul>";
 for(var i=0; i<len;i++){
  var url = bannerLinkAry[i%len];
  var src = bannerAry[i%len];
  
  if(url){
   img_str += "<li><a href='"+url+"'><img src='"+src+"' style='display:none;'/></a></li>";
  }else{
   img_str += "<li><img src='"+src+"' style='display:none;'/></li>";
  }  
  btn_str += "<li><img src='img/btn_off.png' alt='"+name+"'/><img src='img/btn_on.png' alt='"+name+"' class='hidden'/></li>";
 }
 img_str += "</ul></div>";
 btn_str += "</ul></div>";
 str = btn_str+img_str;

 jQuery(str).prependTo("#banner");
 jQuery("#banner .img_list img").load(function(){bannerImgLoadChk();});

 
 
}
function bannerImgLoadChk(){
 bannerLoadCount++;
 if(bannerMax<=bannerLoadCount){
  bannerConfig(); 
 }
}
function bannerConfig(){
 
 jQuery("#banner .img_list ul li").each(function(i) {     
  jQuery(this).find("img").stop().animate({opacity:0},0); 
 });

 jQuery("#banner .btn_list ul li").click(bannerBtnClick).css("cursor","pointer");
 bannerPlay(0);


 clearInterval(visualInterval);
 visualInterval = setTimeout(bannerRoll, 4000);

}
function bannerBtnClick(){
 clearInterval(visualInterval);
 visualInterval = setTimeout(bannerRoll, visualIntervalTime);

 var idx = jQuery(this).index();
 bannerPlay(idx);
}
function bannerRoll(){
 
 curNum++;
 if(curNum>bannerMax-1){
  curNum = 0;  
 }
 bannerPlay(curNum);
}
function bannerPlay(n){
 jQuery("#banner .img_list ul li").each(function(i) {      
  if(i==n){
   jQuery(this).find("img").css("display","block");   
   jQuery(this).find("img").stop().animate({opacity:1},800);
  }else{
   jQuery(this).find("img").css("display","none");
   jQuery(this).find("img").stop().animate({opacity:0},0);   
  }
 });
 bannerBtnPlay(n);
 clearInterval(visualInterval);
 visualInterval = setTimeout(bannerRoll, visualIntervalTime);
 curNum = n;
}
function bannerBtnPlay(n){
 jQuery("#banner .btn_list ul li").each(function(i) {    
  if(i==n){
   jQuery(this).find("img").eq(0).addClass("hidden");
   jQuery(this).find("img").eq(1).removeClass("hidden");
  }else{
   jQuery(this).find("img").eq(1).addClass("hidden");
   jQuery(this).find("img").eq(0).removeClass("hidden");
  }
 });
}

 

 

예제링크

http://hompylove.com/2014/test/banner01/



예제다운

http://hompylove.com/2014/test/banner01/down.zip

댓글목록

등록된 댓글이 없습니다.

홈피사랑 제공서비스

  • 홈피사랑 홈페이지제작 1.웹표준, 크로스브라우징 지원

    웹표준, 크로스브라우징 지원

    IE, 크롬, 사파리,파이어폭스 등 어떤 브라우저에서도 동일하게 홈페이지가 보여질 수 있도록 제작됩니다.

  • 홈피사랑 홈페이지제작 2.호스팅/도메인 1년 무상지원

    호스팅/도메인 1년 무상지원

    기본형 호스팅,도메인 1년 무상지원

  • 홈피사랑 홈페이지제작 3.원본파일제공

    원본파일제공

    추후 수정 및 유지관리가 용이하도록 제작완료 후 홈페이지 소스를 제공합니다.

  • 홈피사랑 홈페이지제작 4.검색등록 무료지원

    검색등록 무료지원

    네이버,다음 사이트 및 지역검색 등록 지원 및 노출 키워드제안(협의후)