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

페이지 정보

작성자 홈피사랑 작성일14-07-19 14:06 조회7,529회 댓글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);