零基础建站培训教程介绍

当前位置:

jquery自动全屏轮播图banner代码

我们在做网站时,经常需要制作轮播图,可以在自己的网站上进行图片的轮播切换。

今天给大家介绍一种jquery自动全屏轮播图banner,先让我们看下效果图:

jquery自动全屏轮播图banner

以下是这款jquery自动全屏轮播图banner切换图的代码:

HTML代码


<div class="slider" id="slider">
  <div class="slider-inner">
    <div class="item">
      <img class="img" style="background: url('slide_1.jpg');">
    </div>
    <div class="item">
      <img class="img" style="background: url('slide_2.jpg');">
    </div>
    <div class="item">
      <img class="img" style="background: url('slide_3.jpg');">
    </div>
  </div>
</div>

JQUERY代码


<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
/**
 * 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: 4000,
    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) {
          if (currentIndex != $(this).index()) {
                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() {
        sliderFun.stop();
        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();
});
</script>

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;
  }

同类功能制作方法

发表评论

零基础学建站就到学做网站论坛