标签：extra water sre tail == soft 属性 xxx sel
XXXX年XX月XX日，经理交给我一个站点新闻资讯网页开发的活儿。我一个java程序猿，怎么完毕得了网页设计这样高端的活儿呢！
之前尽管有学过一点HTML。CSS的知识。可是在实际的使用中，把页面整的好看非常困难，最后信心没了，就再也不想去做涉及网页开发的事儿了。一心学习java。假设在小公司做java web开发，专门做后台的开发时非常少的。一般还得弄前台页面（PS:做这些前台也非常easy，要么用一些前端框架，要么就是把曾经的项目拷过来再改动下页面）。拿到网页开发这个活儿。我顿时愣了，只是好在不用我去设计页面。仅仅要把美工做好的模板拿过来再进行一下排版就OK了。仅仅写代码当然难不住作为程序猿的我啦！
于是啪啦啪啦的去写代码了。突然发现。咦。这是个什么玩意？每隔一段时间就会显示下一张新闻图片。问了下美工，他说这是一个叫“轮播”的东东，仅仅认为这个东西好奇妙，美工说你去网上找一下做轮播效果的代码，然后改改即可啦~百度了一下，发现搜索到的结果特别多，并且大部分都是用jquery写的，于是随便找到一个效果拿过去用了，效果确实令人惬意。
拿过来改下确实能解决事儿，可是我已经对无脑的复制粘贴感到厌烦了，这终究不是个办法，我不仅要知道他确实能实现这样的效果，并且也要了解它究竟是如何工作的（据我观察。公司的一些程序猿的一些代码都是复制粘贴过来的。你去看里面的一些代码就会认为非常凌乱，有时代码出问题了，你去问他，他竟然不知道！当然我这里不是为了黑大伙。只不过复制代码不会对我们技术的提升有不论什么效果）。于是依据自己的一些理解，提供了这篇jquery轮播效果的解说。假设文中有什么疏漏。还奢望不吝赐教。
首先看一下效果：
轮播效果分析：
轮播效果实现笔记：
代码部分：
-----------------------------------------------------------------------------------
HTML:
<pre name="code" class="html"><div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a> </li> <li class="slider-panel"> <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a> </li> <li class="slider-panel"> <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a> </li> <li class="slider-panel"> <a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a> </li> </ul> <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;
}
$(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‘);
//隐藏向前、向后翻button
$(‘.slider-page‘).hide();
//鼠标上悬时显示向前、向后翻button,停止滑动。鼠标离开时隐藏向前、向后翻button。開始滑动
$(‘.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();
});
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，而且隐藏向前、向后button。使第一个索引button处于激活状态。
事件部分：通过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‘);
//隐藏向前、向后翻button
$(‘.slider-page‘).hide();
//鼠标上悬时显示向前、向后翻button,停止滑动，鼠标离开时隐藏向前、向后翻button。開始滑动
$(‘.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">
<ul class="slider-main">
<li class="slider-panel">
<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/2.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/3.jpg"></a>
</li>
<li class="slider-panel">
<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="关注RiccioZhang的博客" title="关注RiccioZhang的博客" src="images/4.jpg"></a>
</li>
</ul>
<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轮播效果就完毕了。当然还有非常多须要改进的地方。
本篇文章的源码能够在例如以下几个地址下载：
标签：extra water sre tail == soft 属性 xxx sel
原文地址：http://www.cnblogs.com/yxysuanfa/p/6963663.html
