jquery Carousel Diagram Example

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
* {margin:0; padding:0; word-break:break-all;}
Body {background: #FFF; color: #333; font:12px/1.5em Helvetica, Arial, Sans-serif;}
H1, H2, H3, H4, H5, h6 {font-size:1em;}
A {color: #2B93D2; text-decoration:none;}
a:hover {color: #E31E1C; text-decoration:underline;}
UL, Li {list-style:none;}
FieldSet, img {border:none;}
. v_show{
width:595px;
margin:20px 0 1px 60px;
}
. v_caption{
height:35px;
Overflow:hidden;
Background:url ("img/btn_cartoon.gif") no-repeat 0 0;
}
. v_caption h2{
Float:left;
width:84px;
height:35px;
Overflow:hidden;
Background:url ("Img/btn_cartoon.gif") no-repeat;
Text-indent: -9999px;
}
. v_caption. cartoon{
Background-position:0 -100px;
}
. highlight_tip{
Display:inline;
Float:left;
margin:14px 0 0 10px;
}
. Highlight_tip span{
Display:inline;
Float:left;
height:7px;
width:7px;
Overflow:hidden;
Background:url ("Img/btn_cartoon.gif") no-repeat 0-320px;
Text-indent: -9999px;
}
. Highlight_tip. current{
Background-position:0 -220px;
}
. change_btn{
Float:left;
MARGIN:7PX 0 0 10px;
}
. change_btn span{
Display:block;
Float:left;
width:30px;
height:23px;
Overflow:hidden;
Background:url ("Img/btn_cartoon.gif") no-repeat;
Text-indent: -9999px;
Cursor:pointer;
}
. change_btn. prev{
Background-position:0 -400px;
}
. change_btn. next{
width:31px;
Background-position: -30px-400px;
}
. v_caption em{
Display:inline;
Float:right;
margin:10px 12px 0 0;
Font-family:simsun;
}
. v_content{
position:relative;
width:592px;
height:160px;
Overflow:hidden;
border-right:1px solid #E7E7E7;
border-bottom:1px solid #E7E7E7;
border-left:1px solid #E7E7E7;
}
. v_content_list{
Position:absolute;
width:2500px;
top:0;
left:0;
}
. v_content ul{
Float:left;
}
. v_content ul li{
Display:inline;
Float:left;
margin:10px 2px 0;
padding:8px;
}
. v_content ul Li a{
Display:block;
width:128px;
height:80px;
Overflow:hidden;
}
. v_content ul Li img{
width:128px;
height:96px;
}
. v_content ul Li h4{
width:128px;
height:18px;
}
. v_content ul Li H4 a{
Display:inline!important;
Height:auto!important;
}
. v_content ul Li span{
Color: #666;
}
. v_content ul Li em{
Color: #888;
Font-family:verdana;
Font-size:0.9em;
}
</style>
<script src= "Jquery-2.1.4.js" ></script>
<script>
$ (function () {
var page=1;//initializes the current layout to 1
var i=4;//4 photos per release
$ ("Span.next"). Click (function () {//To add a click event to the next page button
var $parent =$ (this). Parents ("div.v_show");//Click to get grandfather elements
var $v _show= $parent. Find ("div.v_content_list");//Locate video display area
var $v _content= $parent. Find ("div.v_content");//Locate the display area perimeter div

var v_width= $v _content.width ();//Get the width of each edition
var len= $v _show.find ("Li"). length;//get the total number of pictures in the video
var page_count=math.ceil (len/i);//The total number of pictures divided by the number of pictures per version, rounding up, get the number of pages
if (! $v _show.is (": Animated")) {//If the video area is not in the animation, execute the following function. Do not perform in animations to prevent animations from being appended
if (page==page_count)//If the last page
{
$v _show.animate ({left: "0px"}, "slow");//jump to first layout
page=1;
}else
{
$v _show.animate ({left: "-=" +v_width}, "slow");//change one layout per click
page++;
}
$parent. Find ("span"). EQ ((page-1)). AddClass ("current")//Find the Span element (subscript starting from 0, page 1, which is the span corresponding to the page), add Class current
. siblings (). Removeclass ("current");//Other sibling elements remove class current
}
});
$ ("Span.prev"). Click (function () {
var $parent =$ (this). Parents ("Div.v_show");
var $v _show= $parent. Find ("div.v_content_list");
var $v _content= $parent. Find ("div.v_content");

var v_width= $v _content.width ();
var len= $v _show.find ("Li"). length;
var page_count=math.ceil (len/i);
if (! $v _show.is (": Animated")) {
if (page==1)//If the first layout
{
$v _show.animate ({left: "-=" +v_width* (page_count-1)}, "slow");//Jump to the last layout
Page=page_count;
}else
{
$v _show.animate ({left: "+ =" +v_width}, "slow");
page--;
}
$parent. Find ("span"). EQ ((page-1)). AddClass ("current")
. siblings (). Removeclass ("current");
}
})
})
</script>
<body>
<div class= "V_show" >
<div class= "V_caption" >
<div class= "Highlight_tip" >
<span class= "Current" >1</span><span>2</span><span>3</span><span>4< /SPAN>
</div>
<div class= "CHANGE_BTN" >
<span class= "prev" > Prev </span>
<span class= "Next" > Next </span>
</div>
<em><a href= "#" > More >></a></em>
</div>
<div class= "V_content" >
<div class= "V_content_list" >
<ul>
<li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a><li><a href= "#" ></a></ul>
</div>
</div>
</div>
</body>
jquery Carousel Diagram Example