Home > Web Front-end > JS Tutorial > body text

Use jquery to write left and right carousel special effects_jquery

WBOY
Release: 2016-05-16 17:00:18
Original
1287 people have browsed it

I haven't been very busy recently. I practiced writing a carousel effect. Although the effect and function seem to be fine, I think there are many things that need to be improved. I still have a long way to go in the front-end position. Of course, there are still many things to learn. Here is just a record of my recent research on js. I believe I can write better ones in the future

Replace the link of the jquery framework with the image to see the effect

The source code is as follows:

Copy the code The code is as follows:





轮播图





<script> <br>var b_width = 1000; // Width of large image <br>var speed = 500; // Image moving speed to the left <br>var s_time = 3000 // Image automatic scrolling speed <br>var pic_li = $("#lunbo_pic").children("li"); <br>$(document).ready(function(e) { <br>var $ul_width= pic_li.width() * pic_li .length; //The width of the carousel <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>left : -mar_lf <br>},speed); <br>} <br>if(id == "arr_l"){ <br>prePage(); <br>} <br>if(id == "arr_r"){ <br>nextPage(); <br>} <br>}); <br>//Previous<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>//Next<br>function nextPage(){ <br>if($(".small_xz").index() == pic_li.length -1){ <br>$("#lunbo_pic").css ("left",0); <br>/*$("#lunbo_pic").animate({ <br>"left": 0 <br>},speed);*/ <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>


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!