代码介绍

我们在做网站时，经常需要制作轮播图，可以在自己的网站上进行图片的轮播切换。今天给大家介绍一种jquery自动全屏轮播图banner，先让我们看下效果图：

相关代码

代码实例

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

HTML代码

JQUERY代码

/**

* 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 += '

1. ';

for (var i = 0; i < sliderCount; i++) {

if (i == 0) {

html += '

'

}else{

html += '

'

}

}

html += '

'

$slider.append(html);

// 指示器居中

var $pointer = $slider.find('.slider-pointer');

$pointer.css({

left: '50%',

marginLeft: - $pointer.width()/2

});

}

// pointerControl

if (settings.arrowControl) {

var html = "";

html += '<';

html += '>'

$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();

});

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;

}