自动滑动的banner图

Posted 2020-08-25 草根级

实例：

html页面：

<div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 1200px;">
   <div class="slider" id="slider">
      <div class="slider-inner">
         <div class="item">
            <img src="/public/home/images/1.jpg" ">
         </div>
         <div class="item">
            <img src="/public/home/images/21.jpg" ">
         </div>
      </div>
   </div>
</div>

CSS代码：

.slider {
    position: relative;
    height: 400px;
    min-width: 1004px;
    width: 100%;
    overflow: hidden;
}

.slider .slider-pointer {
    position: absolute;
    bottom: 20px;
    color: #fff;
    list-style: none;
    padding: 0;
    z-index: 999;
}

.slider .slider-pointer li {
    display: inline-block;
    margin: 0 15px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #ffffff;
    opacity: 0.85;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    transition: all 320ms ease;
}

.slider .slider-pointer li:hover {
    background-color: #e30006;
}

.slider .slider-pointer li.active {
    background-color: #b00005;
}

.slider .slider-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.slider .slider-inner .item {
    width: 100%;
    height: 100%;
    float: left;
}

.slider .slider-inner .img {
    background-position: center top !important;
    width: 100%;
    height: 100%;
}

.slider .slider-control {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 999;
    border-radius: 30px;
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    background-color: #ffffff;
    opacity: 0.5;
    cursor: pointer;
    top: 40%;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    transition: all 320ms ease;
}

.slider .slider-control:hover {
    opacity: 0.65;
    background-color: #b00005;
}

.slider .slider-control:active {
    opacity: 0.85;
}

.slider .slider-control.prev {
    display: none;
    left: 20px;
}

.slider .slider-control.next {
    display: none;
    right: 20px;
}

.slider:hover .slider-control.prev {
    display: block;
    left: 20px;
}

.slider:hover .slider-control.next {
    display: block;
    right: 20px;
}

javascript代码：

    /**
         * Author         : CheneyLiu
         * Date           : date
         * isAuto:        true, 自动播放
         * transTime:     3000, 自动播放间隔
         * animateSpeed:  1000,  动画速度
         * sliderMode:    ‘slide‘, 类型//‘slide | fade‘,
         * pointerControl: true, 指示器开关
         * pointerEvent:  ‘click‘, 指示器类型//‘hover‘ | ‘click‘,
         * arrowControl:  true, 左右控制
         */
        ;
        (function($) {
            $.fn.Slider = function(options) {
                "use strict";

                var settings = $.extend({
                    isAuto : true,
                    transTime : 3000,
                    animateSpeed : 1000,
                    sliderMode : ‘slide‘, //‘slide | fade‘,
                    pointerControl : true,
                    pointerEvent : ‘click‘,//‘hover‘ | ‘click‘,
                    arrowControl : true,
                }, options);
                var interval;
                var isAnimating = false;
                var $slider = $(this);
                var $sliderWrap = $slider.find(‘.slider-inner‘);
                var sliderCount = $sliderWrap.find(‘> .item‘).length;
                var sliderWidth = $slider.width();
                var currentIndex = 0;

                var sliderFun = {
                    controlInit : function() {
                        // pointerControl
                        if (settings.pointerControl) {

                            var html = ‘‘;
                            html += ‘<ol class="slider-pointer">‘;
                            for (var i = 0; i < sliderCount; i++) {
                                if (i == 0) {
                                    html += ‘<li class="active"></li>‘
                                } else {
                                    html += ‘<li></li>‘
                                }
                            }
                            html += ‘</ol>‘
                            $slider.append(html);
                            // 指示器居中
                            var $pointer = $slider.find(‘.slider-pointer‘);
                            $pointer.css({
                                left : ‘50%‘,
                                marginLeft : -$pointer.width() / 2
                            });
                        }
                        // pointerControl
                        if (settings.arrowControl) {
                            var html = "";
                            html += ‘<span class="slider-control prev">&lt;</span>‘;
                            html += ‘<span class="slider-control next">&gt;</span>‘
                            $slider.append(html);
                        }
                        $slider.on(‘click‘, ‘.slider-control.prev‘, function(
                                event) {
                            sliderFun.toggleSlide(‘prev‘);
                        });
                        $slider.on(‘click‘, ‘.slider-control.next‘, function(
                                event) {
                            sliderFun.toggleSlide(‘next‘);
                        });
                    },
                    // slider
                    sliderInit : function() {
                        sliderFun.controlInit();
                        // 模式选择
                        if (settings.sliderMode == ‘slide‘) {
                            // slide 模式
                            $sliderWrap.width(sliderWidth * sliderCount);
                            $sliderWrap.children().width(sliderWidth);
                        } else {
                            // mode 模式
                            $sliderWrap.children().css({
                                ‘position‘ : ‘absolute‘,
                                ‘left‘ : 0,
                                ‘top‘ : 0
                            });
                            $sliderWrap.children().first().siblings().hide();
                        }
                        // 控制事件
                        if (settings.pointerEvent == ‘hover‘) {
                            $slider.find(‘.slider-pointer > li‘).mouseenter(
                                    function(event) {
                                        sliderFun.sliderPlay($(this).index());
                                    });
                        } else {
                            $slider.find(‘.slider-pointer > li‘).click(
                                    function(event) {
                                        sliderFun.sliderPlay($(this).index());
                                    });
                        }
                        // 自动播放
                        sliderFun.autoPlay();
                    },
                    // slidePlay
                    sliderPlay : function(index) {
                        sliderFun.stop();
                        isAnimating = true;
                        $sliderWrap.children().first().stop(true, true);
                        $sliderWrap.children().stop(true, true);
                        $slider.find(‘.slider-pointer‘).children().eq(index)
                                .addClass(‘active‘).siblings().removeClass(
                                        ‘active‘);
                        if (settings.sliderMode == "slide") {
                            // slide
                            if (index > currentIndex) {
                                $sliderWrap.animate({
                                    left : ‘-=‘
                                            + Math.abs(index - currentIndex)
                                            * sliderWidth + ‘px‘
                                }, settings.animateSpeed, function() {
                                    isAnimating = false;
                                    sliderFun.autoPlay();
                                });
                            } else if (index < currentIndex) {
                                $sliderWrap.animate({
                                    left : ‘+=‘
                                            + Math.abs(index - currentIndex)
                                            * sliderWidth + ‘px‘
                                }, settings.animateSpeed, function() {
                                    isAnimating = false;
                                    sliderFun.autoPlay();
                                });
                            } else {
                                return;
                            }
                        } else {
                            // fade
                            if ($sliderWrap.children(‘:visible‘).index() == index)
                                return;
                            $sliderWrap.children().fadeOut(
                                    settings.animateSpeed).eq(index).fadeIn(
                                    settings.animateSpeed, function() {
                                        isAnimating = false;
                                        sliderFun.autoPlay();
                                    });
                        }
                        currentIndex = index;
                    },
                    // toggleSlide
                    toggleSlide : function(arrow) {
                        if (isAnimating) {
                            return;
                        }
                        var index;
                        if (arrow == ‘prev‘) {
                            index = (currentIndex == 0) ? sliderCount - 1
                                    : currentIndex - 1;
                            sliderFun.sliderPlay(index);
                        } else if (arrow == ‘next‘) {
                            index = (currentIndex == sliderCount - 1) ? 0
                                    : currentIndex + 1;
                            sliderFun.sliderPlay(index);
                        }
                    },
                    // autoPlay
                    autoPlay : function() {
                        if (settings.isAuto) {
                            interval = setInterval(function() {
                                var index = currentIndex;
                                (currentIndex == sliderCount - 1) ? index = 0
                                        : index = currentIndex + 1;
                                sliderFun.sliderPlay(index);
                            }, settings.transTime);
                        } else {
                            return;
                        }
                    },
                    //stop
                    stop : function() {
                        clearInterval(interval);
                    },
                };
                sliderFun.sliderInit();
            }
        })(jQuery);
        jQuery(document).ready(function($) {
            $(‘#slider‘).Slider();
        });

以上是做banner的基本代码实例。