안녕하세요~~ 디자이너로 일하고 있는 사람입니다.
슬라이드 소스를 받아와서, 원하는 디자인으로 수정하는중인데....
숫자가 붙는것을 출력값을 텍스트로 바꾸고 싶은데.. if 문 어디에 어떻게 해야 할지 모르겠어요
지금 i++ 로 숫자가 자동으로 더해져서, 1,2,3,4 가 출력되고 있는데...
if 문으로 i = 1 이면 어쩌구저쩌구... i=2 면.. 블라블라 이런식으로 해당 위치의 숫자를 텍스트로 바꾸고 싶어요.
아래는 소스 입니다.
도와주세효오오오옹 ~~~~~~~~~~~~ ㅠ.ㅠ
--- 스크립트 --
Copy
<script type="text/javascript">$(function() { var sWidth = $("#focus").width(); var len = $("#focus ul li").length; var index = 0; var picTimer; var btn = "<div class='btnBg'></div><div class='btn'>"; for(var i=0; i < len; i++) { btn += "<span>" + (i+1) + "</span>"; } btn += "</div>" $("#focus").append(btn); $("#focus .btnBg").css("opacity",0.5); $("#focus .btn span").mouseenter(function() { index = $("#focus .btn span").index(this); showPics(index); }).eq(0).trigger("mouseenter"); $("#focus ul").css("width",sWidth * (len + 1)); $("#focus ul li div").hover(function() { $(this).siblings().css("opacity",0.7); },function() { $("#focus ul li div").css("opacity",1); }); $("#focus").hover(function() { clearInterval(picTimer); },function() { picTimer = setInterval(function() { if(index == len) { showFirPic(); index = 0; } else { showPics(index); } index++; },3000); }).trigger("mouseleave"); function showPics(index) { var nowLeft = -index*sWidth; $("#focus ul").stop(true,false).animate({"left":nowLeft},500); $("#focus .btn span").removeClass("on").eq(index).addClass("on") } function showFirPic() { $("#focus ul").append($("#focus ul li:first").clone()); var nowLeft = -len*sWidth; $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() { $("#focus ul").css("left","0"); $("#focus ul li:last").remove(); }); $("#focus .btn span").removeClass("on").eq(0).addClass("on"); }});</script>-- html ---
Copy
<div class="wrapper"> <div id="focus"> <ul> <li> <div style=" margin:0px; left:-40px; top:0; width:980px; height:320px;"><a href="#" target="_blank"><img src="1.jpg" alt="" /></a></div></li> <li> <div style="margin:0px; left:-40px; top:0; width:980px; height:320px;"><a href="#" target="_blank"><img src="2.jpg" alt="" /></a></div> </li> <li> <div style="margin:0px; left:-40px; top:0; width:980px; height:320px;"><a href="#" target="_blank"><img src="3.jpg" alt="" /></a></div> </li> <li> <div style="margin:0px; left:-40px; top:0; width:980px; height:320px;"><a href="#" target="_blank"><img src="4.jpg" alt="" /></a></div> </li> </ul> </div> </div>답변 2개 / 댓글 2개
채택된 답변
+20 포인트
블랙캣77
2017-01-24 (화) 12:14:41
for(var i=0; i < len; i++) {
btn += "<span>" + (i+1) + "</span>";
}
이부분을
for(var i=0; i < len; i++) {
text = '';
if(i == 0 ){
text = '원하는텍스트';
}else if(i == 1){
text = '원하는텍스트';
}
btn += "<span>" + text + "</span>";
}변경하시면됩니다.
답변에 대한 댓글 1개
ㅍㅏ란보석
2017-01-24 (화) 12:51:32
2017-01-24 (화) 12:17:48
vat btn 위에
var txt = new Array();
txt[0] = "abc";
txt[1] ="qwe";
이런식으로 글을 넣고
(i+1)을 txt[i] 로 고치세요
var txt = new Array();
txt[0] = "abc";
txt[1] ="qwe";
이런식으로 글을 넣고
(i+1)을 txt[i] 로 고치세요
답변에 대한 댓글 1개
ㅍㅏ란보석
2017-01-24 (화) 12:50:44
오오오 더 간단하네요 !!!
위에 채택하고 나니... 댓글이 하나 더 달렸네요
감사합니다 !!!
감사해요 정말 ~~ ㅠㅠ
위에 채택하고 나니... 댓글이 하나 더 달렸네요
감사합니다 !!!
감사해요 정말 ~~ ㅠㅠ
답변을 작성하려면 로그인이 필요합니다.
지식인 보다 더 빨랐어요, 정말 감사해요~~ ^^