jQuery实现轮播效果(一)-基础

         XXXX年XX月XX日，经理交给我一个网站新闻资讯网页开发的活儿，我一个java程序员，怎么完成得了网页设计这样高端的活儿呢！之前虽然有学过一点HTML，CSS的知识，但是在实际的使用中，把页面整的好看很困难，最后信心没了，就再也不想去做涉及网页开发的事儿了，一心学习java。如果在小公司做java web开发，专门做后台的开发时很少的，一般还得弄前台页面（PS:做这些前台也很简单，要么用一些前端框架，要么就是把以前的项目拷过来再修改下页面）。拿到网页开发这个活儿，我顿时愣了，不过好在不用我去设计页面，只要把美工做好的模板拿过来再进行一下排版就OK了，只写代码当然难不住作为程序员的我啦！于是啪啦啪啦的去写代码了，突然发现，咦，这是个什么玩意？每隔一段时间就会显示下一张新闻图片，问了下美工，他说这是一个叫“轮播”的东东，只觉得这个东西好神奇，美工说你去网上找一下做轮播效果的代码，然后改改就行啦~百度了一下，发现搜索到的结果特别多，而且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人满意。

         拿过来改下确实能解决事儿，但是我已经对无脑的复制粘贴感到厌烦了，这终究不是个办法，我不仅要知道他确实能实现这种效果，而且也要了解它到底是怎样工作的（据我观察，公司的一些程序员的一些代码都是复制粘贴过来的，你去看里面的一些代码就会觉得很凌乱，有时代码出问题了，你去问他，他居然不知道！当然我这里不是为了黑大伙，仅仅只是不会对我们技术的提升有任何效果）。于是根据自己的一些理解，提供了这篇jquery轮播效果的讲解，如果文中有什么疏漏，还奢望指教。

      首先看一下效果：

     轮播效果分析：

1. 轮播效果大致可以分为3个部分：轮播图片（图片或者是包含容器），控制轮播图显示的按钮（向左、向右按钮，索引按钮(例如上面效果图的顶部的数字按钮)），每隔一段时间轮流显示轮播图片。
2. 轮播图的显示：要显示的轮播图显示，不需要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
3. 控制按钮：鼠标点击或者移到索引按钮上面时，显示对应索引位置的轮播图；向上、向下按钮负责控制显示上一张、下一张轮播图片。
4. 其它：一般索引按钮有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自动轮播，鼠标离开时开始自动轮播。

   轮播效果实现笔记：

1. jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。
2. 两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，具体的使用参照jquery的api；
3. CSS透明背景的实现：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以参看下面的参看资料），兼容大部分主流浏览器包括IE；为什么不使用opacity呢？因为opacity会使文字也透明（子元素也会透明）。
4. HTML骨架很重要，你写的html的结果应该是良好的。

    代码部分：

-----------------------------------------------------------------------------------

    HTML:

1

2

3

4



<
>





 
  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




























1

2

3

4



<
>






至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。
本篇文章的源代码可以在如下几个地址下载：

 
CSDN下载点击这里 (http://download.csdn.net/detail/qq791967024/8993769)
 
GitHub下载点击这里(https://github.com/ricciozhang/zslider_simple)


参考资料：

 
IE8下实现兼容rgba(透明效果)
 
jquery官方api
 
CSS3 opacity 属性