自写juqery插件实现左右循环滚动效果图 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
 *{margin: 0;padding: 0;}
ul,li{list-style-type: none;}
.slide{
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    margin: 0 auto;
}
.slide li{
    line-height: 400px;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}

/*翻页*/
.prev,.next{
    font-size: 50px;
    position: absolute;
    width: 50px;
    height: 80px;
    line-height: 80px;
    top: 50%;
    margin-top: -50px;
    text-align: center;
    cursor: pointer;
    display: none;
}
.slide:hover .prev,.slide:hover .next{
    background: rgba(100,100,100,.3);
    display: block;
}
.next{right: 0;}
/*pagetion*/
.pagetion{
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 0;
}
ul.page{
    padding-left: 50px;
}
ul.page li{
    float: left;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    margin-right: 5px;
    border: 1px solid #ddd;
    cursor: pointer;
}
ul.page li.curr{background: #F90650;}
</style>
</head>
<body>
<div class="slide">
    <ul class="imgBox">
        <li><img src="http://hcjp.github.io/work/demo/wfgd/1.jpg"></li>
        <li><img src="http://hcjp.github.io/work/demo/wfgd/2.jpg"></li>
        <li><img src="http://hcjp.github.io/work/demo/wfgd/3.jpg"></li>
    </ul>
</div>
</body>
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
$(function(){
    $('.slide').slide({
        'type': 1,
        'lr' : true,
        'pt' : true
    });
});
</script>
</html>
$(function(){
    $.fn.slide = function(options) {
        var defaults = {
            'width' : 800,
            'height': 400,
            'curr' : 0,
            'type' : 0,
            'lr' : false,
            'pt' : false
        };
        var _this = this;
        var _ul = _this.find('ul.imgBox');
        var _lg = _ul.find('li').length;//实际个数
        var timer = null;

        var settings = $.extend({},defaults, options);

        return this.each(function(){
            init(act);
        });
        /*构造*/
        function init(callBack){
            _ul.html(_ul.html()+_ul.html());
            setStyle();
            if(settings.lr){
                addLr();
            }
            if(settings.pt){
                addPt();
            }
            callBack();
        }
        /*添加翻页*/
        function addLr(){
            _this.append('<span class="prev"><</span><span class="next">></span>');
            _this.find('.prev').on('click',prev);
            _this.find('.next').on('click',next);
        }
        /*添加页码*/
        function addPt(callBack){
            var _html = '';
            for(var i = 0;i < _lg;i++){
                _html += '<li></li>';
            }
            _this.append('<div class="pagetion"><ul class="page">' + _html + '</ul></div>');
            $('.pagetion li').each(function(index){
                if(index == settings.curr){
                    $(this).addClass('curr');
                }
                $(this).on('click',function(){
                    clearTimeout(timer);
                    settings.curr = index;
                    change(settings.type);
                    act();
                });
            });
        }
        /*滚动*/
        function act(){
            timer = setInterval(function(){
                settings.curr++;
                if(settings.curr == _lg + 1){
                    settings.curr = 1;
                    _ul.css({'left':'0px'});
                }
                change(settings.type);
            },3000);
        }
        /*下一张*/
        function next(){
            clearTimeout(timer);
            settings.curr++;
            if(settings.curr == _lg + 1){
                settings.curr = 1;
                _ul.css({'left':'0px'});
            }
            change(settings.type);
            act();
        }
        /*上一张*/
        function prev(){
            clearTimeout(timer);
            settings.curr--;
            if(settings.curr == -1){
                settings.curr = _lg - 1;
                _ul.css({'left':'-' + settings.width * _lg + 'px'});
            }
            change(settings.type,'prev');
            act();
        }
        /*设置样式*/
        function setStyle(){
            var _li = _ul.find('li');
            _this.css({
                'width': settings.width + 'px',
                'height' : settings.height + 'px'
            });
            _ul.css({'width' : settings.width * _li.length + 'px','position':'absolute'});
            _ul.find('li').each(function(){
                $(this).css({
                    'width': settings.width + 'px',
                    'height' : settings.height + 'px',
                    'float' : 'left'
                });
            });
        }
        function change(_type,lr){
            var _p = settings.curr;
            if(!_type){
                _ul.css({'left':'-' + settings.width * settings.curr + 'px'});
            }else{
                _ul.stop(true,false).animate({'left':'-' + settings.width * settings.curr + 'px'});
            }
            if(_p == _lg){
                _p = 0;
            }
            $('.pagetion li').eq(_p).addClass('curr').siblings().removeClass('curr');
        }
    }
});

 更多http://hcjp.github.io/work/demo/

posted @ 2016-08-17 15:48  想旅游咯  阅读(227)  评论(0)  编辑  收藏  举报