jQuery图片轮播插件——前端开发必看

最新推荐文章于 2024-05-07 23:35:53 发布

wo小橘子

最新推荐文章于 2024-05-07 23:35:53 发布

阅读量527

点赞数 1

分类专栏：学习

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML代码：

<body>
<div class="slider">
    <div class="ul-box">
        <ul>
            <li><a href="javascript:;"><img src="images/01.jpg"/></a></li>
            <li><a href="javascript:;"><img src="images/02.jpg"/></a></li>
            <li><a href="javascript:;"><img src="images/03.jpg"/></a></li>
            <li><a href="javascript:;"><img src="images/04.jpg"/></a></li>
            <li><a href="javascript:;"><img src="images/05.jpg"/></a></li>
        </ul>
    </div>
    <div class="mask"></div>
    <div class="prev"><img src="images/sign_out.png"/></div>
    <div class="next"><img src="images/sign_in.png"/></div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/index-2.js"></script>
<script>
    $('.slider').slider({
        width : 640,
        height : 270,
        during : 2000, //动画执行间隔
        speed : 500, //动画速度
        btnSize : 20, //底部遮罩层的按钮大小
        btnSpace : 10, //底部的按钮间隙
        direction : 1 //轮播方向默认为1，图片向左移动
    });
</script>
</body>

css代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
    position: relative;
    overflow: hidden;
}
.slider ul{
    list-style: none;
    float: left;
}
.slider ul li{
    float: left;
}
.slider .mask{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
    position: absolute;
    width: 45px;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    cursor: pointer;
    top: 0;
    display: none;
}
.slider .prev{
    left: 0;
}
.slider .next{
    right: 0;
}
.slider .prev img, .slider .next img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22.5px;
    margin-left: -22.5px;
}

JScript代码：

/**
 * Created by Administrator on 2017/3/17 0017.
 */
(function ($) {
    $.fn.slider = function (setting) { //给jQuery的实例对象绑定一个slider方法
        var defaultSetting = {
            width : 640,
            height : 270,
            during : 3000,
            speed : 500,
            btnSize : 30,
            btnSpace : 10,
            direction : 1
        }
        setting = $.extend(true, {}, defaultSetting, setting); //用传入的参数替换掉默认的设置
        return this.each(function (i, item) {
            var _setInterval = window.setInterval;
            window.setInterval = function (callback, timer, param) { //重写setInterval函数，让其可以传参
                var args = Array.prototype.slice.call(arguments, 2);
                var _fn = function () {
                    callback.apply(null, args);
                }
                return _setInterval(_fn, timer);
            }
            var _this = $(this),
                ulBox = $('.ul-box', this),
                ul = $('ul', this),
                li = $('li', ul),
                img = $('img', li),
                len = li.size(),
                mask = $('.mask', this),
                index = 0, //用来控制按钮的下标
                flag = true, //标识动画是否执行完成
                gap, //执行动画的按钮下标和当前按钮的下标的差
                timer; //计时器
            _this.width(setting.width).height(setting.height);
            ulBox.width(setting.width * 3 * len).height(setting.height).css({
                marginLeft: -setting.width * len
            });
            ul.width(setting.width * len).height(setting.height);
            img.width(setting.width).height(setting.height);
            mask.height(setting.btnSize + 2 * setting.btnSpace);
//添加btn
            for(var i = 0, str = ''; i < len; i++){
                str += '<div class="sliderBtn"></div>';
            }
            mask.html(str);
            var ulFir = ul.clone(true);
            var ulSec = ul.clone(true);
            var sliderBtn = $('.sliderBtn', '.mask');
            ulBox.append(ulFir);
            ulBox.append(ulSec);
            sliderBtn.each(function (i, item) {
                $(item).css({
                    width : setting.btnSize,
                    height : setting.btnSize,
                    top : setting.btnSpace,
                    left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace
                });
                $(item).mouseenter(function () {
                    gap = Math.abs(i - index);
                    i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap));
                })
            });
            btnAni(0);
//按钮样式变化
            function btnAni (index) {
                $('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)');
                $('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)');
            }
//动画
            function ani (direction, num) {
                if(flag){
//默认1向左运动，0向右运动
                    flag = false;
                    var ulfir = $('ul', ulBox).eq(0);
                    var left = parseInt(ulfir.css('margin-left'), 10);
                    if(direction){
                        index += num;
                        index = index % len;
                        left = left - num * setting.width;
                        ulfir.animate({
                            marginLeft: left
                        }, setting.speed, function () {
                            if(left <= -len * setting.width){
                                ulfir = ulfir.remove();
                                ulfir.css('margin-left', 0);
                                ulBox.append(ulfir);
                            }
                            flag = true;
                        });
                    }else{
                        index -= num;
                        index = index <= -1 ? len - 1 : index;
                        left = left + num * setting.width;
                        ulfir.animate({
                            marginLeft: left
                        }, setting.speed, function () {
                            if(left >= len * setting.width){
                                var ulLast = $('ul', ulBox).eq(2).remove();
                                ulLast.css('margin-left', 0);
                                ulBox.prepend(ulLast);
                                ulfir.css('margin-left', 0);
                            }
                            flag = true
                        })
                    }
                    btnAni(index)
                }
            }
//定时器
            timer = setInterval(ani, setting.during, setting.direction, 1);
            _this.hover(function () {
                $('.prev', this).css('display', 'block');
                $('.next', this).css('display', 'block');
                clearInterval(timer);
            }, function () {
                $('.prev', this).css('display', 'none');
                $('.next', this).css('display', 'none');
                timer = setInterval(ani, setting.during, setting.direction, 1);
            });
            $('.next').click(function () {
                flag && ani(1, 1);
            });
            $('.prev').click(function () {
                flag && ani(0, 1);
            })
        })
    }
})(jQuery);

wo小橘子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery图片轮播插件——前端开发必看

HTML代码： body>div class="slider"> div class="ul-box"> ul> li>a href="javascript:;">img src="images/01.jpg"/>a>li> li>a href="javascript:;">img src="images/02
复制链接

扫一扫