제이쿼리 슬라이더 질문입니다! 채택완료
위 주소를 참고로 슬라이더를 만들어보려고하는데요..
이 슬라이더에 사진이름하고 번호를 추가할 수 없을까요?ㅠㅠ
예를들면.. 이렇게욤.. ㅠㅠ 아시는 분 조언 주시면 정말 감사하겠습니다!!ㅠㅠ
Copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> 제이쿼리를 이용한 이미지 슬라이드 </title><style type="text/css"> body {padding:0px; margin:0px; line-height:1} .photo_gallery {position:relative; width:700px; padding:20px 4px; background:#454545} .photo_gallery p.photo_img {width:596px; height:447px; border:2px solid #CFC1C0; margin:0px auto 20px auto} .photo_gallery p.photo_img img {width:596px; height:447px} .photo_gallery .photo_list {width:600px; overflow:hidden; margin-left:49px} .photo_gallery .photo_list .list_wrap ul {width:600px; list-style:none; padding:0px; margin:0px; float:left} .photo_gallery .photo_list .list_wrap ul li {float:left; width:140px; line-height:0; padding:0px 5px} .photo_gallery .photo_list .list_wrap ul li a img {width:136px; height:102px; vertical-align:middle; border:2px solid #CFC1C0} .photo_gallery .photo_list .list_wrap ul li.active a img {border:2px solid #DE3838} .photo_gallery button {position:absolute; bottom:59px; cursor:pointer} .photo_gallery button.btn_prev {left:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_prev.png) no-repeat left top} .photo_gallery button.btn_next {right:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_next.png) no-repeat left top}</style><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">jQuery(document).ready(function() { //Slide Gallery 이미지 샐랙터 jQuery(".list_wrap ul li").click(function() { jQuery(this).addClass("active").siblings().removeClass(); jQuery(".photo_img img").attr("src",jQuery(this).children("a").attr("href")); return false; }); //Slide Gallery 슬라이딩 초기화 jQuery(".list_wrap").width("600"*parseInt(jQuery(".list_wrap ul").size())+"px"); jQuery(".list_wrap ul:last").prependTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); //Silde Gallery의 prev버튼 jQuery("button.btn_prev").click(function() { jQuery(".list_wrap").animate({ marginLeft:"+=600px" },"swing",function() { jQuery(".list_wrap ul:last").prependTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); jQuery(".list_wrap ul li").removeClass(); }); }); //Silde Gallery의 next버튼 jQuery("button.btn_next").click(function() { jQuery(".list_wrap").animate({ marginLeft:"-=600px" },"swing",function() { jQuery(".list_wrap ul:first").appendTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); jQuery(".list_wrap ul li").removeClass(); }); });});</script></head><body><div class="photo_gallery"> <p class="photo_img"> <img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷" /> </p> <button class="btn_prev">prev</button> <button class="btn_next">next</button> <div class="photo_list"> <div class="list_wrap"> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" alt="스크린샷" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" alt="스크린샷" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" alt="스크린샷" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" alt="스크린샷" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷" /></a></li> </ul> </div> </div></div></body></html>
답변 3개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
chqhdpdy
8년 전
댓글을 작성하려면 로그인이 필요합니다.
kerit8년 전
추가한 부분에 주석달아놨어요
보시고 하시면되용
이미지를 추가할경우 기존 소스가 4개씩 ul li 로 되어있으니까
Copy
<ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷21" class="21"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷22" class="22"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷23" class="23"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷24" class="24"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" /></a></li> </ul>이렇게 추가하시면되요
아래는 소스에요~
Copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> 제이쿼리를 이용한 이미지 슬라이드 </title><style type="text/css"> body {padding:0px; margin:0px; line-height:1} .photo_gallery {position:relative; width:700px; padding:20px 4px; background:#454545} .photo_gallery p.photo_img {width:596px; height:447px; border:2px solid #CFC1C0; margin:0px auto 20px auto} .photo_gallery p.photo_img img {width:596px; height:447px} .photo_gallery .photo_list {width:600px; overflow:hidden; margin-left:49px} .photo_gallery .photo_list .list_wrap ul {width:600px; list-style:none; padding:0px; margin:0px; float:left} .photo_gallery .photo_list .list_wrap ul li {float:left; width:140px; line-height:0; padding:0px 5px} .photo_gallery .photo_list .list_wrap ul li a img {width:136px; height:102px; vertical-align:middle; border:2px solid #CFC1C0} .photo_gallery .photo_list .list_wrap ul li.active a img {border:2px solid #DE3838} .photo_gallery button {position:absolute; bottom:59px; cursor:pointer} .photo_gallery button.btn_prev {left:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_prev.png) no-repeat left top} .photo_gallery button.btn_next {right:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_next.png) no-repeat left top} .photo_text { width: 599px; height: 50px; border: 0px solid #CFC1C0; margin: 0px auto; position:absolute; margin-top: -70px; margin-left: 50px; background:#ececec; opacity:0.9 } .photo_text p.leftP { float:left; margin-left:30px; } .photo_text p.rightP { float:right; margin-right:30px; }</style><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">jQuery(document).ready(function() { var alt = jQuery(".photo_img img").attr('alt'); //처음 로딩시 img 의 alt 값 변수에 담기 jQuery('.leftP').text(alt); //위의 변수값을 leftP의 text값으로 변경 var allcnt = jQuery('.list_wrap ul li').find('img').length; //처음 로딩할떄 list_wrap ul li img 의 전체 갯수를 구해서 변수에 담기 jQuery('.allC').text(allcnt); //전체 갯수를 담은 변수를 allC의 text값으로 변경 var nowcnt =jQuery(".photo_img img").attr('class'); //alt 값 뽑아오는것과 같이 처음 로딩시 class의 값을 뽑아서 변수에 담기 jQuery('.nowC').text(nowcnt); //위의 class 변수값을 담은 것을 nowC의 text값으로 변경 //Slide Gallery 이미지 샐랙터 jQuery(".list_wrap ul li").click(function() { var alt2 = jQuery(this).children("a").attr("alt"); //현재 선택된 a의 alt 값을 변수에 담는다. var incnt = jQuery(this).children("a").attr("class"); //현재 선택된 a의 class 값을 변수에 담는다. jQuery(this).addClass("active").siblings().removeClass(); jQuery(".photo_img img").attr("src",jQuery(this).children("a").attr("href")); jQuery(".photo_img img").attr("alt",jQuery(this).children("a").attr("alt")); jQuery('.leftP').text(alt2); //선택된 a의 alt 값을 변수에 담아서 leftP의 text값으로 변경 jQuery('.nowC').text(incnt); //선택된 a의 class 값을 변수에 담아서 nowC의 text값으로 변경 return false; }); //Slide Gallery 슬라이딩 초기화 jQuery(".list_wrap").width("600"*parseInt(jQuery(".list_wrap ul").size())+"px"); jQuery(".list_wrap ul:last").prependTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); //Silde Gallery의 prev버튼 jQuery("button.btn_prev").click(function() { jQuery(".list_wrap").animate({ marginLeft:"+=600px" },"swing",function() { jQuery(".list_wrap ul:last").prependTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); jQuery(".list_wrap ul li").removeClass(); }); }); //Silde Gallery의 next버튼 jQuery("button.btn_next").click(function() { jQuery(".list_wrap").animate({ marginLeft:"-=600px" },"swing",function() { jQuery(".list_wrap ul:first").appendTo(".list_wrap"); jQuery(".list_wrap").css("margin-left","-600px"); jQuery(".list_wrap ul li").removeClass(); }); });});</script></head><body><div class="photo_gallery"> <p class="photo_img"> <img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷1" class="1" /> </p> <div class="photo_text"> <p class="leftP">블라블라</p> <!--<div class="rightP">(<p class="rightN1">0</p>/<p class="rightN2">10</p>)</div>--> <p class="rightP">(<span class="nowC">현재</span>/<span class="allC">갯수</span>)</p> </div> <button class="btn_prev">prev</button> <button class="btn_next">next</button> <div class="photo_list"> <div class="list_wrap"> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷1" class="1"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" alt="스크린샷2" class="2"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" alt="스크린샷3" class="3"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" alt="스크린샷4" class="4"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" alt="스크린샷5" class="5"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" alt="스크린샷6" class="6"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" alt="스크린샷7" class="7"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" alt="스크린샷8" class="8"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" alt="스크린샷9" class="9"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" alt="스크린샷10" class="10"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" alt="스크린샷11" class="11"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" alt="스크린샷12" class="12"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" alt="스크린샷13" class="13"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" alt="스크린샷14" class="14"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" alt="스크린샷15" class="15"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" alt="스크린샷16" class="16"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" /></a></li> </ul> <ul> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷17" class="17"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷18" class="18"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷19" class="19"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" /></a></li> <li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷20" class="20"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" /></a></li> </ul> </div> </div></div></body></html>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
kerit8년 전
어... 최대한 그 슬라이드 변경안하고 추가만해서 했는데 이게 엄청 야매로 한거라...맘에 안드실꺼같아영...
요런느낌인데 괜찮으시면 알려드릴께영...... 이게 대신.. 자동으로 그러는건아니고 사진이 추가될때 수작업을 진행해야되서...크흠;;;
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
이게 사진이 네장만 있으면 안나오더라고요... 이건 방법이 없을까요??