jquery Picture Scrolling effect

Effect picture

jquery Code

$ (document). Ready (function () {

Options (1-on, 0-off)
var auto_slide = 1;
var hover_pause = 1;
var key_slide = 1;

Speed of Auto Slide (
var auto_slide_seconds = 5000;
/* IMPORTANT:I know the variable is called ... seconds but it ' s
In milliseconds (multiplied with 1000) ' */

/*move the last list item before the "the". The purpose of this is
If the user clicks to slide left he is able to the last item.*/
$ (' #carousel_ul Li:first '). Before ($ (' #carousel_ul li:last '));

Check if Auto sliding is enabled
if (auto_slide = = 1) {
/*set the interval (loop) to call function slide with option ' right '
and set the interval time to the variable we declared previously * *
var timer = setinterval (' Slide (' right ') ', auto_slide_seconds);

/*and change the value of We hidden field that hold info about
The interval, setting it to the number of milliseconds we declared previously*/
$ (' #hidden_auto_slide_seconds '). Val (auto_slide_seconds);
}

Check if hover pause is enabled
if (Hover_pause = = 1) {
When hovered over the list
$ (' #carousel_ul '). Hover (function () {
Stop the interval
Clearinterval (timer)
},function () {
And when Mouseo tutorial ut start it again
Timer = setinterval (' Slide (' right ') ', auto_slide_seconds);
});

}

Check if key sliding is enabled
if (key_slide = = 1) {

Binding KeyPress function
$ (document). Bind (' KeyPress ', function (e) {
KeyCode for left arrow is Notoginseng and for right it ' s 39 '
if (e.keycode==37) {
Initialize the slide to left function
Slide (' left ');
}else if (e.keycode==39) {
Initialize the slide to right function
Slide (' right ');
}
});

}

});

Functions Bellow

Slide function
function Slide (where) {

Get the item width
var item_width = $ (' #carousel_ul Li '). Outerwidth () + 10;

/* Using a If statement and the where variable check
We'll check where the user wants to slide (left or right) * *
if (where = = ' Left ') {
Calculating the New left indent of the unordered list (UL) to left sliding
var left_indent = parseint ($ (' #carousel_ul '). CSS tutorial (' left ') + item_width;
}else{
Calculating the New left indent of the unordered list (UL) to right sliding
var left_indent = parseint ($ (' #carousel_ul '). CSS (' left '))-item_width;

}

Make the sliding effect using jquery ' s animate function ... '
$ (' #carousel_ul: Not (: Animated) '). Animate ({' Left ': left_indent},500,function () {

/* When the animation finishes to use the IF statement again, and make a ilussion
of infinity by changing place to last or a item*/
if (where = = ' Left ') {
... and if it slided to left we put the last item before the
$ (' #carousel_ul Li:first '). Before ($ (' #carousel_ul li:last '));
}else{
... and if it slided to right we put the
$ (' #carousel_ul li:last '). After ($ (' #carousel_ul li:first '));
}

... and then just get back to the default left indent
$ (' #carousel_ul '). css ({' Left ': ' -210px '});
});

}

HTML code

<div id= ' Carousel_container ' >
<div id= ' left_scroll ' ><a href= ' web effects: Slide ("left"); ' ></a></div>
<div id= ' Carousel_inner ' >
<ul id= ' Carousel_ul ' >
<li><a href= ' # ' ></a></li>
<li><a href= ' # ' ></a></li>
<li><a href= ' # ' ></a></li>
<li><a href= ' # ' ></a></li>
<li><a href= ' # ' ></a></li>

</ul>
</div>
<div id= ' right_scroll ' ><a href= ' javascript:slide ("right"); ' ></a></div>
<input type= ' hidden ' id= ' hidden_auto_slide_seconds ' value=0/>
</div>

I think there's only one. These attributes require further explanation. The left margin of our unordered list is-210px. This is because the last item will be in the first motion, so we set the left margin to the width of the item to a negative number.

CSS Code

#carousel_inner {
Float:left; /* Important for inline positioning * *
width:630px; /* IMPORTANT (this width = width of list item (including margin) * Items shown * *
Overflow:hidden; /* Important (hide the items outside the DIV) * *
/* Non-important Styling Bellow * *
Background: #f0f0f0;
}

#carousel_ul {
position:relative;
left:-210px; /* Important (this should is negative number of list items width (including margin) * *
List-style-type:none; /* Removing the default styling for unordered list items * *
margin:0px;
padding:0px;
width:9999px; * Important * *
/* Non-important Styling Bellow * *
padding-bottom:10px;
}

#carousel_ul li{
Float:left; /* Important for inline positioning of the list items * *
width:200px; /* Fixed width, important * *
/* Just styling bellow*/
padding:0px;
height:110px;
Background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

#carousel_ul li img {
. margin-bottom:-4px; /* ie making a 4px gap bellow an image inside of ' an anchor (&lt;a href...&gt;) ' so ' to fix '
* Styling * *
Cursor:pointer;
Cursor:hand;
border:0px;
}
#left_scroll, #right_scroll {
Float:left;
height:130px;
width:15px;
Background: #c0c0c0;
}
#left_scroll img, #right_scroll img{
border:0; /* Remove the default border of linked image * *
/*styling*/
Cursor:pointer;
Cursor:hand;

}