html全屏banner轮播代码,jquery⾃动全屏轮播图banner代码代码介绍
我们在做⽹站时，经常需要制作轮播图，可以在⾃⼰的⽹站上进⾏图⽚的轮播切换。今天给⼤家介绍⼀种jquery⾃动全屏轮播图banner，先让我们看下效果图：
相关代码
代码实例
以下是这款jquery⾃动全屏轮播图banner切换图的代码：
HTML代码
JQUERY代码
/**
* Author        : CheneyLiu
* Date          : date
* isAuto:        true, ⾃动播放jquery在线图片
* 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,
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({
marginLeft: - $pointer.width()/2
});
}
// pointerControl
if (settings.arrowControl) {
var html = "";
html += '<';
html += '>'
$slider.append(html);
}
$('click', '.slider-control.prev', function(event) { leSlide('prev');
});
$('click', '.', function(event) { leSlide('next');
});
},
// slider
sliderInit: function() {
/
/ 模式选择
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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。