图片左右滚动效果

  一个图片左右滚动的效果,如果滚动到结尾或者开头时,再点击切换则切换到第一张后缀最后一张,省略中间图片的滚动,直接是首位2张图片滚动的效果。

  源代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片左右滚动效果</title>
<style type="text/css">
.newlistdiv { width:565px; height:200px; padding:0 40px; position:relative; float:left;}
.newlistdiv .btnLeft { width:25px; height:40px; background:url(images/btnLeft.jpg) no-repeat; position:absolute; left:0px; top:80px;}
.newlistdiv .btnRight { width:25px; height:40px; background:url(images/btnRight.jpg) no-repeat; position:absolute; right:0px; top:80px;}
.newcnt { width:565px; height:200px; position:relative; overflow:hidden; }
.newcnt .newlist { width:800%; height:200px; position:absolute; top:0; left:0;}
 
.newlist .newtextall { width:565px; float:left; position:relative; z-index:0;height:200px;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function () {

        jQuery.fn.news = function (parent_div, page_size) {
            var positionleft = 0;

            var o = jQuery(this).find(parent_div);
            var w = o.width();

            var showbox = jQuery(this).find('.newlist');

            var len = showbox.find('.newtextall').length;
            var page_count = Math.ceil(len / page_size);
            showbox.width(w * page_count);

            var midItem = showbox.find('.newtextall').slice(1, len - 1); //中间元素

            midItem.css('font-weight', 'bold')

            //向左滚动
            jQuery(this).find('.btnLeft').click(function () {

                if (!showbox.is(':animated')) {
                    if (positionleft == 0) {
                        positionleft = positionleft - w * (page_count - 1);
                        midItem.hide(); //隐藏中间的
                        showbox.animate({
                            left: -w
                        }, 500, function () { showbox.css('left', positionleft); midItem.show(); /*动画结束后再显示出来*/ });
                    } else {
                        positionleft = positionleft + w
                        showbox.animate({
                            left: positionleft
                        }, 500);
                    }
                }
            });
            //向右滚动
            jQuery(this).find('.btnRight').click(function () {

                if (!showbox.is(':animated')) {
                    if (positionleft == -w * (page_count - 1)) {
                        positionleft = 0;
                        midItem.hide(); //隐藏中间的
                        showbox.css('left', -w); //要重设left的位置
                        showbox.animate({
                            left: 0
                        }, 500, function () { midItem.show(); });
                    } else {
                        positionleft = positionleft - w;
                        showbox.animate({
                            left: positionleft
                        }, 500);
                    }
                }
            });
        }

        jQuery(".newlistdiv").each(function () { jQuery(this).news('.newcnt', 1); });
    })
</script>
</head>
 
<body>
<div class="newlistdiv">
    <div class="btnLeft">L</div>
    <div class="btnRight">R</div>
    <div class="newcnt">
        <div class="newlist">
            <div class="newtextall" style="background:#666666">
            1
            </div>
            <div class="newtextall" style="background:#777777">2
            </div>
            <div class="newtextall" style="background:#888888">3
            </div>
            <div class="newtextall" style="background:#999999">4
            </div>
            <div class="newtextall" style="background:#aaaaaa">5
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:图片左右滚动效果

评论(0)Web开发网
阅读(78)喜欢(0)JavaScript/Ajax开发技巧