代码介绍
我们在做网站时,经常需要制作轮播图,可以在自己的网站上进行图片的轮播切换。今天给大家介绍一种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 += '
';
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;
}