JS组件化开发

Wesley13 等级 282 0 0
标签: optionjscarousel

CSS部分

.kui-carousel {
            position: relative;
            overflow: hidden;
        }

        [kui-anim=fade] .kui-carousel-item >* {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0;
            filter:Alpha(opacity=0);
        }
        [kui-anim=fade] .kui-carousel-item >*.kui-show {
            opacity: 1;
            filter:Alpha(opacity=100);
        }

        /* 指示器 */
        [kui-pagePation=insider] .kui-carousel-pagePation {
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
        }
        [kui-pagePation=insider] .kui-carousel-pagePation >* {
            display: inline-block;
            text-decoration: none;
            height: 4px;
            background: #333;
            padding:0 15px;
            margin:0 5px;
            opacity: 0.3;
            filter:Alpha(opacity=30);
            border-radius: 2px;
        }
        [kui-pagePation=insider] .kui-carousel-pagePation >*.kui-this {
            opacity: 0.5;
            filter:Alpha(opacity=50);
        }

HTML部分

<div id="carousel" class="kui-carousel" kui-anim="fade" style="height: 500px;border-bottom: 1px solid #f2f2f2;">
    <div class="kui-carousel-item">
        <div><h1 style="margin: 150px auto;text-align: center"> This Carousel Is Page One</h1></div>
        <div><h1 style="margin: 150px auto;text-align: center;color: red;"> This Carousel Is Page Two And This Text Color is RED</h1></div>
    </div>
    <div class="kui-carousel-pagePation"></div>
</div>

JS部分

var CarouselFn = (function() {

            function Carousel() {}

            var options = {
                width:'',
                height:'',
                anim:'default', //切换方式 ; default 左右,fade 淡入
                autoplay:true,//开启轮播
                delay:1000,  //延时
                idx : 0,  //播放序号
                pagePation:'insider', //分页
                trigger:'click'
            }

            var ELEM_NAME = ['kui-carousel' ,'.kui-carousel-item','kui-show','.kui-carousel-pagePation','kui-this'];
            Carousel.fn = Carousel.prototype;
            Carousel.fn.init = function(option) {
                var self = this;
                self.option = $.extend({}, options ,option);
                //容器
                self.$dom = $(self.option.elem);
                self.carousel_list = self.$dom.find(ELEM_NAME[1]+' >*');
                //限制序号取值范围
                self.option.idx = self.option.idx < self.carousel_list.length ? self.option.idx : 0;
                //设置切换类型
                self.$dom.attr('kui-anim' ,self.option.anim);
                //设置样式
                self.$dom.css({width:self.option.width ,height:self.option.height})
                //分页
                self.PagePation();
                self.autoplay();
                return this;
            }

            Carousel.fn.autoplay = function() {
                var self = this;
                if(!self.option.autoplay) return;
                self.Timer = setInterval( _setIntervalfn ,self.option.delay);
                self.carousel_list.on('mouseover' ,function() {
                    clearInterval(self.Timer);
                })
                self.carousel_list.on('mouseout' ,function() {
                    self.Timer = setInterval( _setIntervalfn ,self.option.delay);
                })
                function _setIntervalfn() {
                    self.option.idx+=1;
                    if(self.option.idx >= self.carousel_list.length){
                        self.option.idx = 0;
                    }
                    self.activeIndex();
                }
            }

            Carousel.fn.PagePation = function() {
                var self = this;
                if( $.inArray(self.option.pagePation ,['insider' ,'outsider']) == -1 ) return;
                self.$dom.attr('kui-pagePation' ,self.option.pagePation);
                $.each(self.carousel_list ,function(i) {
                    $('<a href="javascript:;" class="'+(i==self.option.idx?ELEM_NAME[4]:'')+'"></a>').appendTo(ELEM_NAME[3]);
                })
                self.carousel_page = self.$dom.find(ELEM_NAME[3]+'>*');
                self.activeIndex();
                self.carousel_page.on('click' ,function() {
                    self.option.idx = $(this).index();
                    self.activeIndex()
                })
            }

            Carousel.fn.activeIndex = function() {
                var self = this;
                self.carousel_list.removeClass(ELEM_NAME[2]);
                self.carousel_list.eq( self.option.idx ).addClass(ELEM_NAME[2]);
                self.carousel_page.removeClass(ELEM_NAME[4]);
                self.carousel_page.eq( self.option.idx ).addClass(ELEM_NAME[4]);
            }

            return new Carousel();

        })();

调用组件

var options = {
            elem:'#carousel',
            anim:'fade',
            height:'400px',
            delay:2000,
            // autoplay:false,
            pagePation:'none'
        };

        $in = CarouselFn.init(options);
收藏
评论区

相关推荐

只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
.net core swagger汉化
**基本swagger使用不再详解,具体百度其它帖子** 1.将汉化的swagger js文件复制到项目根目录中 ![](https://oscimg.oschina.net/oscnet/8a46de4361c3973dca1ea77fe1c54ac1084.png) js代码如下 1 'use strict'; 2
JS实现小图放大轮播效果
JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): ![](https://oscimg.oschina.net/oscnet/fea423c49d5f7430375068501d3f032d631.png)  实现效果: 图片自动轮播,鼠标移入停止,移出继续轮播 点击下方小图可以实现切换 **步骤一:建立HTML布局,具体
JS组件化开发
#### CSS部分 .kui-carousel { position: relative; overflow: hidden; } [kui-anim=fade] .kui-carousel-item >* {
Java&Selenium自动化测试调用JS实现单击
Java&Selenium自动化测试调用JS实现单击 ========================== /* * the method of invoking js to do something * * @author davieyang * @create 2018-08-05 1:37 *
ASP.NET MVC 4 之 Jquery Ajax
//前台界面,一个下拉框,一根文本框 <select id="SEX">     <option>男</option>     <option>女</option>     <option>未知</option> </select> <input id ="DESC"  type="text"/>
CryptoJS
CryptoJS ======== 引用: [https://cdnjs.com/libraries/crypto-js](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fcdnjs.com%2Flibraries%2Fcrypto-js) WordArray (An array of
D3.js 力导向图的显示优化
![image](https://nebula-blog.azureedge.net/nebula-blog/d303.jpeg) D3.js ----- 作为一个前端,说到可视化除了听过 [D3.js](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fd3js.org%2F) 的大名,
Echarts 绘制关系图(知识图谱可视化)
1. 前言 正在做知识图谱 ,以前可视化用的是D3,因为D3不是太会,而且D3学习成本比较高,所以改用Echarts,Echarts做出来的关系图还是挺好的。 2. 关系图实例 样例代码如下: <!DOCTYPE html> <html> <head> <title>ECharts 关系图</title> <script src=
Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 ![](https://oscimg.oschina.net/oscnet/d7e04daefbe994516a605f1d19dc5909504.png) 直接上
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
JavaScript模块化
前言:模块化开发需求 ---------- 在JS早期,使用script标签引入JS,会造成以下问题: 1. 加载的时候阻塞网页渲染,引入JS越多,阻塞时间越长。 2. 容易污染全局变量。 3. js文件存在依赖关系,加载必须有顺序。项目较大时,依赖会错综复杂。 4. 引入的JS文件过多,不美观,且不易于管理。 一、CommonJS规范 ---