zoukankan      html  css  js  c++  java
  • 自写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/

  • 相关阅读:
    那些离不开的 Chrome 扩展插件
    Spring Boot 实战 —— 入门
    Maven 学习笔记
    Linux lvm 分区知识笔记
    Linux 双向 SSH 免密登录
    CentOS Yum 源搭建
    Ubuntu 系统学习
    iOS 测试三方 KIF 的那些事
    Swift 网络请求数据与解析
    iOS Plist 文件的 增 删 改
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/5780319.html
Copyright © 2011-2022 走看看