实例：
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:;
z-index:;
}
.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:;
border-radius: 30px;
text-align: center;
font-weight:;
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"><</span>';
html += '<span class="slider-control next">></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的基本代码实例。