Javascript picture left and right swipe and toggle

HTML code:

<div class= "V_out v_out_p" >
<div class= "Prev" >
<a href= "javascript:void (0)" ></a>
</div>
<div class= "V_show" >
<div class= "V_cont" >
<ul>
<li index= "0" style= "background: #f00" >[1th]</li>
<li index= "1" style= "background: #ff0" >[2nd]</li>
<li index= "2" style= "background: #f0f" >[3rd]</li>
<li index= "3" style= "background: #999" >[4th]</li>
<li index= "4" style= "background: #666" >[5th]</li>
</ul>
</div>
</div>
<div class= "Next" >
<a href= "javascript:void (0)" ></a>
</div>
<ul class= "Circle" >
<li class= "Circle-cur" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type= "Text/javascript" >

$ (function () {

/*======next======*/
$ (". Next a"). Click (function () {nextscroll ()});

function Nextscroll () {

var Vcon = $ (". V_cont");
var offset = ($ (". V_cont li"). Width ()) *-1;

Vcon.stop (). Animate ({Left:offset}, "Slow", function () {

var FirstItem = $ (". V_cont ul Li"). First ();
Vcon.find ("ul"). Append (FirstItem);
$ (this). CSS ("left", "0px");

Circle ()

});

};


function Circle () {

var CurrentItem = $ (". V_cont ul Li"). First ();
var currentindex = currentitem.attr ("index");

$ (". Circle Li"). Removeclass ("Circle-cur");
$ (". Circle Li"). EQ (currentindex). addclass ("Circle-cur");

}

SetInterval (nextscroll,2000)

/*======prev======*/
$ (". Prev a"). Click (function () {

var Vcon = $ (". V_cont");
var offset = ($ (". V_cont li"). Width () *-1);

var LastItem = $ (". V_cont ul Li"). Last ();
Vcon.find ("ul"). Prepend (LastItem);
Vcon.css ("left", offset);
Vcon.animate ({left: "0px"}, "slow", function () {
Circle ()
})

});

/*======btn====circle======*/
var animateend = 1;

$ (". Circle Li"). Click (function () {

if (Animateend = = 0) {return;}

$ (this). addclass ("Circle-cur"). Siblings (). Removeclass ("Circle-cur");

var Nextindex = $ (this). index ();
var currentindex = $ (". V_cont li"). First (). attr ("index");
var Curr = $ (". V_cont li"). First (). Clone ();

if (Nextindex > Currentindex) {

for (var i = 0; i < Nextindex-currentindex; i++) {

var FirstItem = $ (". V_cont li"). First ();
$ (". V_cont ul"). Append (FirstItem);

}

$ (". V_cont ul"). Prepend (Curr);

var offset = ($ (". V_cont li"). Width ()) *-1;

if (animateend = = 1) {

animateend = 0;
$ (". V_cont"). Stop (). Animate ({Left:offset}, "Slow", function () {

$ (". V_cont ul Li"). First (). remove ();
$ (". V_cont"). CSS ("left", "0px");
Animateend = 1;

});

}

} else {

var curt = $ (". V_cont li"). Last (). Clone ();

for (var i = 0; i < Currentindex-nextindex; i++) {
var LastItem = $ (". V_cont li"). Last ();
$ (". V_cont ul"). Prepend (LastItem);
}

$ (". V_cont ul"). Append (Curt);

var offset = ($ (". V_cont li"). Width ()) *-1;

$ (". V_cont"). CSS ("left", offset);


if (animateend = = 1) {

animateend = 0;
$ (". V_cont"). Stop (). Animate ({left: "0px"}, "slow", function () {

$ (". V_cont ul Li"). Last (). remove ();
Animateend = 1;
});
}
}
});
})
</script>

============================================================================================================

CSS code:

*
{
margin:0px;
padding:0px;
List-style-type:none;
}
. v_out
{
width:748px;
margin:20px Auto;
Overflow:hidden;
}
. v_show
{
width:665px;
Overflow:hidden;
position:relative;
height:280px;
Float:left;
}
. V_cont
{
width:6650px;
Position:absolute;
left:0px;
top:0px;
}
. V_cont UL
{
Float:left;
Text-align:center;
line-height:50px;
}
. V_cont ul Li
{
width:665px;
height:250px;
Background: #f8f8f8;
Float:left;
margin-top:3px;
}

/*---circle---*/
. v_out_p
{
position:relative;
overflow:visible;
}
. Circle
{
Position:absolute;
left:40px;
top:290px;
}
. Circle Li
{
width:120px;
height:60px;
Float:left;
margin-right:10px;
Background: #ccc;
}
. Circle. Circle-cur
{
Background: #f00;
}

/*---switch---*/
. prev,. Next
{
Float:left;
padding:105px 9px 0;
}
. prev A
{
Background: #f00;
}
. prev. ico_1
{
Background:url (input_a.gif) no-repeat 0-3757px;
}

. Next A
{
Background: #f00;
}
. Next. Ico_2
{
Background:url (input_a.gif) no-repeat right-3757px;
}
. prev,. Prev A,. Next,. Next A
{
width:21px;
height:28px;
Display:block;
}

Javascript picture left and right swipe and toggle