The use of jquery to write the left and right rotograph effects

  • 2020-03-30 01:43:03
  • OfStack

Practice is not very busy recently, wrote a round figure effect, although the effect seems to be no problem with the function, but I think the above a lot of things have to be improved, on the front end of the position I have a long way to go, of course, still have a lot of things to learn, here only a record of his own recent research js, I believe that I can write better

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

The source code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns=""> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Shuffling figure </title> 
*{margin:0; padding:0;} 
body{min-width:320px; font-size:12px;} 
p{ word-break:break-all; line-height:24px;} 
ul,ul li,ol,ol li{list-style:none;} 
.clearfix:after{ display:block; clear:both; content:"."; visibility:hidden; height:0px;} 

#pic_carousel{position:relative;width:1000px;height:350px;overflow:hidden;margin: 0 auto;text-align:center;} 
.lunbo_pic{ position:absolute; left:0; top:0; overflow:hidden; text-align:center;} 
.lunbo_pic li{ float:left; overflow:hidden;} 
.lunbo_pic li a img{ width:1000px; display:block;vertical-align:bottom; border:none;} 
.lunbo_curso{ position:absolute; left:50%; width:125px; margin-left:-64px; bottom:0; } 
.lunbo_curso a{ background:url(../images/will_yuan.png) no-repeat center; float:left; color:#00F; width:25px; cursor:pointer;height:25px; line-height:25px; display:block; text-align:center;} 
.lunbo_curso .small_xz{ color:#F0F;} 
.arr{ position:absolute; top:50%; margin-top:-25px; width:30px; height:50px;} 
#arr_l{ left:0; background:#CCC;} 
#arr_r{ right:0; background:#CCC;} 
.tc_kuan{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-100px; width:200px; height:50px; line-height:50px; background:#CCC; color:#000;} 
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script> 
<div id="pic_carousel"> 
<ul id="lunbo_pic" class="clearfix lunbo_pic"> 
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p3.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p1.jpg" /></a></li> 
<li><a href="#"><img src="images/insco_p2.jpg" /></a></li> 
<div id="lunbo_curso" class="lunbo_curso"> 
<a href="#" class="small_xz">1</a> 
<a href="#">2</a> 
<a href="#">3</a> 
<a href="#">4</a> 
<a href="#">5</a> 
<span id="arr_l" class="arr"></span> 
<span id="arr_r" class="arr"></span> 
var b_width = 1000; //The width of the large picture
var speed = 500; //The picture moves to the left
var s_time = 3000 //Image automatic scroll speed
var pic_li = $("#lunbo_pic").children("li"); 
$(document).ready(function(e) { 
var $ul_width= pic_li.width() * pic_li.length; //The width of the rotograph
var small_width = $(".lunbo_curso>a").width() * $(".lunbo_curso>a").length; 

$target = $(; 
var id = $target.attr('id'); 
if($"a") && $target.parent($("#lunbo_curso")) ){ 
var mar_lf = parseInt($target.index() * b_width); 
left : -mar_lf 
if(id == "arr_l"){ 
if(id == "arr_r"){ 
//On a
function prePage(){ 
if($(".small_xz").index() == 0){ 
"left": -parseInt(pic_li.length *b_width - b_width) 
$("#lunbo_curso>a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz"); 
$(".small_xz").index() == pic_li.length - 1; 
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_width; 
"left": mar_lf2 
//The next
function nextPage(){ 
if($(".small_xz").index() == pic_li.length -1){ 
$(".small_xz").index() == 0; 


$("#lunbo_curso>a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz"); 
var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_width; 
"left": mar_lf2 

function picRun(){ 
intervalTime = setInterval(picRun,s_time); 

intervalTime = setInterval(picRun,s_time);; 


Related articles: