slider jq小插件

html代码

<div class="r_list r_1" style="display:block;">
    <div class="min_box">
        <ul class="slider_con">
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name">
                    <a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a>
                </div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
            <li>
                <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a>
                <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div>
                <b>¥12312</b>
                <a href="javascript:;" class="join_car">加入购物车</a>
            </li>
        </ul>
    </div>
    <div class="s_btn">
        <span class="prev_btn"></span>
        <span class="next_btn"></span>
    </div>
</div>

JS调用

$(‘.flash_box .r_1‘).slider({});

JS插件代码

/**
 *
 * @authors Your Name ([email protected])
 * @date    2015-06-12 09:40:14
 * @version $Id$
 */
(function($){
    $.fn.slider=function(opts){
        opts=$.extend({}, $.fn.slider.opts, opts);
        var _this=this;
        _this.opts=opts;
        _this.ie6 = (!!window.ActiveXObject)&&!window.XMLHttpRequest;

        return _this.each(function(){
            var wrap = $(this).find(_this.opts.containerClass);
            var sLi = wrap.find(‘li‘);
            var that = this;
            var $that = $(this);
            var index = 0;
            var time = null;
            that.count = sLi.length;

            // next
            $that.find(_this.opts.nextClass).on(‘click‘, function(event) {
                if (_this.opts[‘isAnimate‘] == true) return false;
                if (index >= that.count-_this.opts.showNum) {
                    index=that.count-_this.opts.showNum;
                }else{
                    index++;
                }
                change.call(that, _this,index,‘next‘);
                return false;
            });
            // prev
            $that.find(_this.opts.prevClass).on(‘click‘, function(event) {
                if (_this.opts[‘isAnimate‘] == true) return false;
                if(index <= 0){
                    index = 0;
                }else{
                    index--;
                }
                change.call(that, _this,index,‘prev‘);
                return false;
            });
            $that.find(_this.opts.boxClass+‘ li‘).each(function(cindex) {
                $(this).on(‘click‘+_this.opts.boxClass, function(event) {
                    change.call(that,_this,cindex,‘box‘);
                    // index=cindex;
                    return false;
                });
            });

            // focus clean auto play
            $that.on(‘mouseover‘, function(event) {
                if (_this.opts.autoPlay) {
                    clearInterval(time);
                }
                if (_this.opts.btnHover) {
                    $that.find(_this.opts.arrowClass).removeClass(‘hide‘);
                }

            });
            // leave
            $that.on(‘mouseleave‘, function(event) {
                if (_this.opts.autoPlay) {
                    startAutoPlay();
                };
                if (_this.opts.btnHover) {
                    $that.find(_this.opts.arrowClass).addClass("hide");
                }
            });
            startAutoPlay();
            //auto play
            function startAutoPlay(){
                if(_this.opts.autoPlay){
                    time=setInterval(function(){
                        if (index >= that.count-_this.opts.showNum) {
                            index = 0;
                        }else{
                            index++;
                        }
                        change.call(that, _this, index, ‘auto‘);
                    }, _this.opts.autoPlayTime);
                }
            }
            // box
            var boxLi = $that.find(_this.opts.boxClass+ ‘ ul li‘);
            var boxWidth = boxLi.outerWidth(true)*boxLi.length;
            if (_this.ie6) {
                $that.find(_this.opts.boxClass).css({
                    ‘width‘:boxWidth
                })
            }
            $that.find(_this.opts.boxClass).css({
                ‘margin-left‘: -(boxWidth/2)
            });
            //ul、li宽
            _this.opts[‘width‘] = sLi.outerWidth();
            wrap.css(‘width‘, sLi.length*sLi.outerWidth());
        })
    }
    function change(_this,num,tag){
        var that=this;
        var $that=$(this);
        var x = num * _this.opts[‘width‘];

            if (_this.opts.showNum>=that.count) {
                return false;
            }
            $that.find(_this.opts.boxClass + ‘ li‘).eq(num).addClass(‘sel‘).siblings().removeClass(‘sel‘);
            $that.find(_this.opts.containerClass).stop().animate({‘margin-left‘:-x}, _this.opts.speed, function(){
                 _this.opts[‘isAnimate‘] = false;
            });
            _this.opts[‘isAnimate‘] = true
    }
    $.fn.slider.opts={
        autoPlay: false,
        autoPlayTime: 2000,
        speed: 400,
        containerClass: ‘.slider_con‘,
        boxClass: ‘.l_btn‘,
        arrowClass: ‘.s_btn‘,
        nextClass: ‘.next_btn‘,
        prevClass: ‘.prev_btn‘,
        isAnimate: false,
        showNum: 5,
        btnHover: false
    }

})(jQuery);
时间: 2024-10-29 00:50:20

slider jq小插件的相关文章

发布两款JQ小插件(图片查看器 + 分类选择器),开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

jq小插件--方便设置css属性

1 $.fn.extend({ 2 setCss:function(name,value){ 3 $(this).css(name,value) 4 } 5 }) 调用方式,如: $('.login-btn').setCss('color','#f60')

VALIDFORM前端小插件实现表单验证;

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

JS小插件之2——cycle元素轮播

元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> cycle demo </titl

H5柱状图2D小插件

1 概述 前端技术在代码的世界里是不可或缺的,而在里面有个东西是经常使用的那便是 js插件,作为一个小白本章节学习如何封装插件,分享下自己的小东西:如何纯js去自己去封装一个柱状图2D小插件? 2 有点low的效果图如下: 3 主要功能 支持超简单使用 支持数据类型json对象 支持设置左右边距 支持设置柱状图宽度 支持柱状图的颜色 支持动画过渡 当然也可以自己增加背景图片功能使其看起来好看一点 ...后续功能可以自己酌情添加 4实现方式 首先 ,我们需要一个容器,在这里只需要一个div就可以了

怎么用jq封装插件

怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再移除 class就行: 2.不用class,直接改变background属性: 直接开干,这里用第二种方法. 第一步: 模板 jq有一个基本框架,直接搬过来呗 (function($){ $.fn.yourName = function(options){ //各种属性.参数 } var optio

简单的轮播图小插件

1 (function () { 2 $.fn.moreImg = function () { 3 var allpar = Array.prototype.slice.call(arguments);//获取传过来的参数,打散成数组,如对这个有疑问可以参考我收藏的[优雅代码]深入浅出 妙用Javascript中apply.call.bind的那个文章,作者讲的老好了 4 var elem = allpar[0]; 5 var allImg = allpar[1]; 6 if (allImg.l

浏览器首页设置(当被小插件占用时)

之前打开浏览器的时候都显示自己设置的首页,突然有一天显示的不是我设置的百度首页了,原来是金山的一个小插件,到设置里面设置了好几次都不行. 问题在这里: 右键浏览器(chrome为例)---> 属性 ---> 快捷方式  目标 ---> 删除掉其中不认识的网址 (如果其中出现了莫名奇妙的网址) 如果修改不了  再看下面:右键浏览器(chrome为例) ---> 常规 ----> 只读的复选框去掉