当前位置:编程学习 > JS >>

jquery 图片滚动效果

jquery 图片滚动效果是利用了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代码

<div id='carousel_container'> 
  <div id='left_scroll'><a href='网页特效:slide("left");'><img src='left.png' /></a></div> 
    <div id='carousel_inner'> 
        <ul id='carousel_ul'> 
            <li><a href='#'><img src='item1.png' /></a></li> 
            <li><a href='#'><img src='item2.png' /></a></li> 
            <li><a href='#'><img src='item3.png' /></a></li> 
            <li><a href='#'><img src='item4.png' /></a></li> 
            <li><a href='#'><img src='item5.png' /></a></li> 
 
        </ul> 
    </div> 
  <div id='right_scroll'><a href='javascript:slide("right");'><img src='right.png' /></a></div> 
  <input type='hidden' id='hidden_auto_slide_seconds' value=0 /> 
</div> 

我觉得只有一个这些属性需要进一步解释。我们的无序列表的左边距为- 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;

}

补充:网页制作,jquery 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,