Jquery를 사용하여 왼쪽 및 오른쪽 캐러셀 특수 효과 작성_jquery

최근에는 별로 바빠서 캐러셀 효과 작성을 연습하지 않았습니다. 효과나 기능은 괜찮은 것 같지만 아직은 개선해야 할 부분이 많은 것 같아요- 물론, 아직 배워야 할 것이 많습니다. 여기에는 js에 대한 최근 연구 기록이 있습니다. 앞으로는 더 나은 내용을 작성할 수 있을 것입니다.

jquery 프레임워크의 링크를 다음으로 대체하세요. 효과를 보려면 이미지

소스코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음:

• 


• 


• 


• 


• 

1
2
3
4
5

<script> <br>var b_width = 1000; // 큰 이미지의 너비 <br>var speed = 500; // 왼쪽으로 이미지 이동 속도 <br>var s_time = 3000 // 이미지 자동 스크롤 속도 <br>var pic_li = $("#lunbo_pic").children("li"); <br>$(document).ready(function(e) { <br>var $ul_width= pic_li.width() * pic_li .length; //캐러셀 너비 <br>$("#lunbo_pic").width($ul_width) <br>var small_width = $(".lunbo_curso>a").width() * $( " .lunbo_curso>a").length; <br>$(".lunbo_curso").width(small_width) <br>$(".lunbo_curso").css("margin-left",-small_width/2) ; <br>}); <br><br><br><br>$(document).live("click",function(e){ <br>$target = $(e.target); <br> var id = $target.attr('id'); <br>if($target.is("a") && $target.parent($("#lunbo_curso")) ){ <br>$target. addClass ("small_xz").siblings().removeClass('small_xz'); <br>var mar_lf =parseInt($target.index() * b_width) <br>$("#lunbo_pic").animate({ <br>왼쪽: -mar_lf <br>},속도); <br>} <br>if(id == "arr_l"){ <br>prePage() <br>} <br>if(id = = "arr_r"){ <br>nextPage(); <br>} <br>}) <br>//이전<br>function prePage(){ <br>if($(".small_xz"). index() == 0){ <br>$("#lunbo_pic").css("left",-4000) <br>$("#lunbo_pic").animate({ <br>"left": -parseInt(pic_li.length *b_width - b_width) <br>},speed) <br>$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings( ).removeClass("small_xz"); <br>$(".small_xz").index() == pic_li.length - 1 <br>}else{ <br>$("#lunbo_curso>a"). eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz") <br>var mar_lf2 =parseInt($("#lunbo_pic") .css("left")) b_width; <br>$("#lunbo_pic").animate({ <br>"left": mar_lf2 <br>},speed) <br>} <br>} <br>//다음<br>function nextPage(){ <br>if($(".small_xz").index() == pic_li.length -1){ <br>$("#lunbo_pic").css ( "왼쪽",0); <br>/*$("#lunbo_pic").animate({ <br>"왼쪽": 0 <br>},속도);*/ <br>$("#lunbo_curso&gt ; a").eq(0).addClass("small_xz").siblings().removeClass("small_xz"); <br>$(".small_xz").index() == 0; <br><br>}else{ <br><br>$("#lunbo_curso>a").eq($(".small_xz").index() 1).addClass("small_xz").siblings().removeClass( " small_xz"); <br>var mar_lf2 =parseInt($("#lunbo_pic").css("left")) - b_width; <br>$("#lunbo_pic").animate({ <br>"left " : mar_lf2 <br>},speed); <br>} <br>} <br><br>function picRun(){ <br>nextPage() <br>} <br>intervalTime = setInterval(picRun, s_time ); <br><br>$("#pic_carousel").on("mouseover",function(){ <br>clearInterval(intervalTime); <br>}) <br>$("#pic_carousel" ) .on("mouseout",function(){ <br>intervalTime = setInterval(picRun,s_time);; <br>}) <br><br></script> 🎜>