网站地图
【www.gdgbn.com--jquery】
效果图片
jquery代码
$(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 first item. the purpose of this is
if the user clicks to slide left he will be able to see 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 our 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教程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 37 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 will check where the user wants to slide (left or right)*/
if(where == "left"){
//...calculating the new left indent of the unordered list (ul) for left sliding
var left_indent = parseint($("#carousel_ul").css教程("left")) + item_width;
}else{
//...calculating the new left indent of the unordered list (ul) for 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 use the if statement again, and make an ilussion
of infinity by changing place of last or first item*/
if(where == "left"){
//...and if it slided to left we put the last item before the first item
$("#carousel_ul li:first").before($("#carousel_ul li:last"));
}else{
//...and if it slided to right we put the first item after the last item
$("#carousel_ul li:last").after($("#carousel_ul li:first"));
}
//...and then just get back the default left indent
$("#carousel_ul").css({"left" : "-210px"});
});
}
html代码
网页特效:slide("left");">
我觉得只有一个这些属性需要进一步解释。我们的无序列表的左边距为- 210px。这是因为最后一个项目，将在第一项动议，所以我们设置左边距到该项目的宽度负数。
css代码
#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 be 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 is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that */
/* 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;}