使用jQuery制作基础的Web图片轮播效果

首先看一下效果：



就这么个意思，没截动图哈~

轮播效果分析：

轮播效果大致可以分为3个部分：轮播图片（图片或者是包含容器），控制轮播图显示的按钮（向左、向右按钮，索引按钮(例如上面效果图的顶部的数字按钮)），每隔一段时间轮流显示轮播图片。

轮播图的显示：要显示的轮播图显示，不需要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。

控制按钮：鼠标点击或者移到索引按钮上面时，显示对应索引位置的轮播图；向上、向下按钮负责控制显示上一张、下一张轮播图片。

其它：一般索引按钮有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自动轮播，鼠标离开时开始自动轮播。

轮播效果实现笔记：

jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。

两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，具体的使用参照jquery的api；

CSS透明背景的实现： background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以参看下面的参看资料），兼容大部分主流浏览器包括IE；为什么不使用opacity呢？因为opacity会使文字也透明（子元素也会透明）。

HTML骨架很重要，你写的html的结果应该是良好的。

代码部分：

HTML:

<pre name="code" class="html"><div class="slider">

<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>

CSS:

* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}

JavaScript：

$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;

//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();

//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});

$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});

$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});

/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}

/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}

//开始轮播
start();
});

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。

事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、

轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。

上面的js写的比较散，结构也不太好，读起来也比较费力，也不易使用，耦合度较高。下篇将给出一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。

下面是整体的代码：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
border: none;
}
.slider-extra {
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
.slider-page a{
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color: #fff;
text-align: center;
display: block;
font-family: "simsun";
font-size: 22px;
width: 28px;
height: 62px;
line-height: 62px;
margin-top: -31px;
position: absolute;
top: 50%;
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
left: 100%;
margin-left: -28px;
}</style>
<script type="text/javascript">$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;

//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();

//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});

$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});

$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});

/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}

/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}

//开始轮播
start();
});</script>
</head>
<body>
<div class="slider">
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:;;"><</a>
<a class="slider-next" href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>

至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。

使用插件实现

上面的效果看起来还令人满意，唯一不足的就是：每次需要轮播效果时，要将代码复制粘贴过去，如果有些部分需要修改（例如：轮播时的动画效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑动效果，不可避免的要修改js代码），那么就需要对js代码进行修改，对我所写的jquery轮播效果的js代码不熟悉的程序员来说，修改这些js确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置（不光只是本篇文章的插件），程序员只需要写少量的代码就可以实现丰富的功能，这当然是一件很好的事情。本篇文章的轮播插件的html和css部分需要程序员自己编写，而实现效果的js只需要少量的编写。

这里我们使用到的zslider插件在GitHub上开源：

github:https://github.com/ricciozhang/zslider_v1

嗯，我们来看代码：

(function($, window, document) {
//---- Statics
var DEFAULT_ANIMATE_TYPE = 'fade',
ARRAY_SLICE = [].slice,
ARRAY_CONCAT = [].concat
;

//---- Methods
function concatArray() {
var deep = false,
result = [];
if(arguments.length > 0 &&
arguments[arguments.length - 1] === true) {
deep = true;
}
for(var i = 0; i < arguments.length; i++) {
if(!!arguments[i].length) {
if(deep) {
for(var j = 0; j < arguments[i].length; j++) {
//recursive call
result = ARRAY_CONCAT.call(result,
concatArray(arguments[i][j], true));
}
} else {
result = ARRAY_CONCAT.call(result, arguments[i]);
}
} else if(i != arguments.length - 1 ||
(arguments[arguments.length - 1] !== true &&
arguments[arguments.length - 1] !== false)) {
result.push(arguments[i]);
}
}
return result;
}

//----- Core
$.fn.extend({
zslider: function(zsliderSetting, autoStart) {
var itemLenght = 0,
currItemIndex = 0,
started = false,
oInterval = {},
setting = {
intervalTime: 3000,
step: 1,
imagePanels: $(),
animateConfig: {
atype: 'fade',
fadeInSpeed: 500,
fadeOutSpeed: 1000
},
panelHoverStop: true,
ctrlItems: $(),
ctrlItemActivateType: 'hover' || 'click',
ctrlItemHoverCls: '',
flipBtn: {},
panelHoverShowFlipBtn: true,
callbacks: {
animate: null
}
},
that = this
;

//core methods
var slider = {
pre: function() {
var toIndex = itemLenght +
(currItemIndex - setting.step) % itemLenght;
slider.to(toIndex);
},
next: function() {
var toIndex = (currItemIndex + setting.step) % itemLenght;
slider.to(toIndex);
},
to: function(toIndex) {
//handle the index value
if(typeof toIndex === 'function') {
toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, step);
}
if(window.isNaN(toIndex)) {
toIndex = 0;
}
toIndex = Math.round(+toIndex) % itemLenght;
if(toIndex < 0) {
toIndex = itemLenght + toIndex;
}

var currentPanel = setting.imagePanels.eq(currItemIndex),
toPanel = setting.imagePanels.eq(toIndex),
currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
toCtrlItem = setting.ctrlItems.eq(toIndex)
;
if(!setting.callbacks.animate ||
setting.callbacks.animate.call(that,
concatArray(setting.imagePanels, true),
concatArray(setting.ctrlItems, true),
currItemIndex, toIndex) === true) {
currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
toCtrlItem.addClass(setting.ctrlItemHoverCls);

toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
}

//set the current item index
currItemIndex = toIndex;
},
start: function() {
if(!started) {
started = true;
oInterval =
window.setInterval(slider.next, setting.intervalTime);
}
},
stop: function() {
if(started) {
started = false;
window.clearInterval(oInterval);
}
},
isStarted: function() {
return started;
}
};
function initData() {
if(zsliderSetting) {
var temp_callbacks = zsliderSetting.callbacks;

$.extend(setting, zsliderSetting);
$.extend(setting.callbacks, temp_callbacks);

itemLenght = setting.imagePanels.length;
}
//convert to the jquery object
setting.imagePanels = $(setting.imagePanels);
setting.ctrlItems = $(setting.ctrlItems);
setting.flipBtn.container = $(setting.flipBtn.container);
setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
}
function initLook() {
//show the first image panel and hide other
setting.imagePanels.hide();
setting.imagePanels.filter(':first').show();
//activate the first control item and deactivate other
setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
$(that).css('overflow', 'hidden');
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
}
function initEvent() {
$(concatArray(setting.imagePanels,
setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
if(setting.panelHoverStop) {
slider.stop();
}
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(true);
}
}, function() {
slider.start();
if(setting.panelHoverShowFlipBtn) {
showFlipBtn(false);
}
});
if(setting.ctrlItemActivateType === 'click') {
setting.ctrlItems.unbind('click');
setting.ctrlItems.bind('click', function() {
slider.to($(this).index());
});
} else {
setting.ctrlItems.hover(function() {
slider.stop();
slider.to($(this).index());
}, function() {
slider.start();
});
}
setting.flipBtn.preBtn.unbind('click');
setting.flipBtn.preBtn.bind('click', function() {
slider.pre();
});
setting.flipBtn.nextBtn.unbind('click');
setting.flipBtn.nextBtn.bind('click', function() {
slider.next();
});
}
function init() {
initData();

initLook();

initEvent();
}

function showFlipBtn(show) {
var hasContainer = setting.flipBtn.container.length > 0,
eles;
eles = hasContainer ? setting.flipBtn.container :
//to the dom array:
/*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn),
ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
concatArray(setting.flipBtn.preBtn,
setting.flipBtn.nextBtn, true);
if(show) {
$(eles).show();
} else {
$(eles).hide();
}
}

init();
if(arguments.length < 2 || !!autoStart){
slider.start();
}
return slider;
}
});
})(jQuery, window, document);

您可能感兴趣的文章:

非常棒的jQuery图片轮播效果
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Jquery代码实现图片轮播效果（一）
原生js和jquery实现图片轮播淡入淡出效果
原生js和jquery实现图片轮播特效
jQuery插件slicebox实现3D动画图片轮播切换特效
jQuery制作简洁的图片轮播效果
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
jQuery图片轮播的具体实现
12款经典的白富美型―jquery图片轮播插件―前端开发必备
基于jquery的图片轮播 tab切换组件
基于JQuery的实现图片轮播效果(焦点图)