<!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/

自写juqery插件实现左右循环滚动效果图的更多相关文章

  1. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  2. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...

  3. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  4. IOS实现自动循环滚动广告--ScrollView的优化和封装

    一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...

  5. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  6. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  7. ul 仿 table 循环滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  9. 写jQuery插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

随机推荐

  1. PHP的内存回收（GC)

    php官方对gc的介绍:http://php.net/manual/zh/features.gc.php

  2. FAIL - Deploy Upload Failed, Exception: [org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException: the request was rejected because its size (112503036) exceeds the configured

    Message:  FAIL - Deploy Upload Failed, Exception: [org.apache.tomcat.util.http.fileupload.FileUpload ...

  3. python 3.6.1 安装scrapy踩坑之旅

    系统环境:win10 64位系统安装 python基础环境配置不做过多的介绍 window环境安装scrapy需要依赖pywin32,下载对应python版本的exe文件执行安装,下载的pywin32 ...

  4. 利用js给datalist或select动态添加option选项

    <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type=& ...

  5. javap -v没有显示LocalVaribleTable

    时隔多日,终于找到为什么javap -v .class文件没有LocalVariableTable出现 因为默认的javac编译没有生成相关的调试信息,这里我们可以通过javac -help查看指令帮 ...

  6. 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  7. Helm

    helm类似yum helm下载的是配置清单文件 核心术语: Chart:一个helm程序包: Repository:Charts仓库,https/http服务器: Release:特定的Chart部 ...

  8. 思维导图，UML图，程序流程图制作从入门到精通

    工具: https://www.processon.com/ 第一 用例图 第二 时序图 第三 流程图

  9. SpringBoot之整合Mybatis范例

    依赖包: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...

  10. vuejs 单文件组件.vue 文件

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所 ...