[스크립트] 3개의 롤링 이미지에 각각 링크를 걸고 싶습니다.
본문
아래와 같이 3개의 이미지가 롤링되는 소스입니다.
3개의 이미지에 각각 링크를 걸고 싶은데 어떻게 해야 좋을지 정말 모르겠네요.
맨 아래의 스크립트 소스에 추가되어야 할 것 같은데
도무지 모르겠습니다.
혹시 아시는 분은 알려주시면 정말 감사하겠습니다. (_._)
-------------------------------------------------------------
<script>
setInterval(function(){
IMGCHECK()
},2000); //8000
</script>
<div id="main_wrap" style="height: 350px;">
<!----메인 슬라이딩 이미지----->
<div id="main_sliding" style="border: 1px solid #FF0000;">
<div id="main_img">
<div class="img_01"><!--img src="/img/tb/arrow_left.png" style="cursor:pointer" onClick="LeftCH()"//--></div>
<div class="img_02"><img src="/img/tb/car_01.png" alt="" class="mainCar" onclick="Topico" /></a></div>
<div class="img_03"><!--img src="/img/tb/arrow_right.png" style="cursor:pointer" onClick="RightCH()"/--></div>
</div>
<div id="main_dot">
<img src="/img/tb/dot_on.png" class="Topico1" style="cursor:pointer" onClick="TopCH(1)"/>
<img src="/img/tb/dot_off.png" class="Topico2" style="cursor:pointer" onClick="TopCH(2)"/>
<img src="/img/tb/dot_off.png" class="Topico3" style="cursor:pointer" onClick="TopCH(3)"/>
</div>
</div>
--------------------------------------------------------------------------------
스크립트 js 파일
function IMGCHECK() {
function TopCH(x) {
$('.mainCar').hide();
$('.mainCar').fadeIn(500);
$('.mainCar').attr("src", '/img/tb/car_0'+x+'.png');
$('.Topico').attr("src", '/img/tb/dot_off.png');
$('.Topico'+x).attr("src", '/img/tb/dot_on.png');
MainList.CheckSu.value=x;
}
}
----------------------------------------------------------------------------------
답변 2
<div id="main_wrap" style="height: 350px;">
<!----메인 슬라이딩 이미지----->
<div id="main_sliding" style="border: 1px solid #FF0000;">
<div id="main_img">
<div class="img_01"><!--img src="/img/tb/arrow_left.png" style="cursor:pointer" onClick="LeftCH()"//--></div>
<div class="img_02"><a href=""><img src="/img/tb/car_01.png" alt="" class="mainCar" /></a></div>
<div class="img_03"><!--img src="/img/tb/arrow_right.png" style="cursor:pointer" onClick="RightCH()"/--></div>
</div>
<div id="main_dot">
<img src="/img/tb/dot_on.png" class="Topico1" style="cursor:pointer" onClick="TopCH(1)"/>
<img src="/img/tb/dot_off.png" class="Topico2" style="cursor:pointer" onClick="TopCH(2)"/>
<img src="/img/tb/dot_off.png" class="Topico3" style="cursor:pointer" onClick="TopCH(3)"/>
</div>
</div>
<script>
var i = 1, t;
var link = ['', 'naver.com', 'sir.kr', 'daum.net'];
function IMGCHECK(x) {
$('.mainCar').hide().fadeIn(500).attr("src", '/img/tb/car_0'+x+'.png');
$('#main_dot img').attr("src", '/img/tb/dot_off.png');
$('.Topico'+x).attr("src", '/img/tb/dot_on.png');
$("#main_img a").attr("href", "http://" +link[i]);
}
function timer() {
t =setInterval(function(){
i = i > 2 ? 0 : i;
IMGCHECK(++i)
}, 2000);
}
function TopCH(x) {
clearTimeout(t);
IMGCHECK(x);
i = ++x ;
timer();
}
$("#main_img a").attr("href", "http://" +link[1]);
timer();
</script>
말씀하신 것처럼 적용했는데 롤링은 잘되는데
링크는 빈값<a herf="">으로 잡히는 것 같습니다.
<div class="img_02"><a href=""><img src="/img/tb/car_01.png" alt="" class="mainCar" /></a></div> 이것이 맞는지요...
어디가 문제인지 도저히 알수가 없습니다. ㅜㅜ
<div id="main_wrap" style="height: 350px;">
<!----메인 슬라이딩 이미지----->
<div id="main_sliding" style="border: 1px solid #FF0000;">
<div id="main_img">
<div class="img_01"><!--img src="/img/tb/arrow_left.png" style="cursor:pointer" onClick="LeftCH()"//--></div>
<div class="img_02">
<a href="http://naver.com"><img src="/img/tb/car_01.png" alt="" /></a>
<a href="http://sir.kr"><img src="/img/tb/car_02.png" alt="" /></a>
<a href="http://daum.net"><img src="/img/tb/car_03.png" alt="" /></a>
</div>
<div class="img_03"><!--img src="/img/tb/arrow_right.png" style="cursor:pointer" onClick="RightCH()"/--></div>
</div>
<div id="main_dot">
<img src="/img/tb/dot_on.png" class="Topico1" style="cursor:pointer" onClick="TopCH(1)"/>
<img src="/img/tb/dot_off.png" class="Topico2" style="cursor:pointer" onClick="TopCH(2)"/>
<img src="/img/tb/dot_off.png" class="Topico3" style="cursor:pointer" onClick="TopCH(3)"/>
</div>
</div>
<script>
var i = 1;
function IMGCHECK(x) {
$(".img_02 a").hide();
$(".img_02 a").eq(x-1).fadeIn(500);
$('#main_dot img').attr("src", '/img/tb/dot_off.png');
$('.Topico'+x).attr("src", '/img/tb/dot_on.png');
}
function timer() {
t =setInterval(function(){
i = i > 2 ? 0 : i;
IMGCHECK(++i)
}, 2000);
}
function TopCH(x) {
clearTimeout(t);
IMGCHECK(x);
i = ++x ;
timer();
}
$(".img_02 a").hide();
$(".img_02 a").eq(0).show();
timer();
</script>
링크는 확실하게 되는데 이젠 롤링이 이상하네요. ^^;;
아무튼 정말 감사합니다.
html 소스에서 <img>태그에 <a>태그를 이용하여 링크를 걸어주면 될것 같습니다.
