前，平时总是使用别人的轮播图插件，这次决定自已写一个，功能越多越好。实际现起来，发现并不容易。先实现基本的功能，下两周要丰富起来。
图是别人的图，心是自已的心。直接上代码：
一：结构
<!-- carousel begin -->
<div class="carousel-wrap">
<div class="carousel-main-wrap">
<ul class="carousel-scroll-wrap">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/8.jpg" alt=""></li>
</ul>
<span class="carousel-left">向左</span>
<span class="carousel-right">向右</span>
</div>
</div>
<!-- carousel end -->
注意，1 必须是三张以上图片，2 最外层carousel-wrap必须要有一个宽高
二：CSS
/* css reset start*/
@charset "UTF-8";
*{
padding:0;
margin:0;
list-style:none;
border:0;
}
body{
100%;
font-family: 'SimSun', 'Microsoft YaHei', Arial;
font-size: 14px;
color: #fff;
}
a,a:visited{
color: #fff;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
img{
display: block;
}
/* css reset end */
/* carousel start */
.carousel-wrap{
800px;
height: 504px;
margin: 0 auto;
background-color: gray;
}
.carousel-main-wrap{
overflow: hidden;
position: relative;
}
.carousel-scroll-wrap{
position: relative;
}
.carousel-scroll-wrap li{
overflow: hidden;
position: absolute;
top: 0;
left: 10000px;
}
.carousel-scroll-wrap li img{
800px;
height: 504px;
display: block;
}
.carousel-left{
50px;
height: 100px;
margin-top: -50px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: teal;
display: block;
position: absolute;
left: 0;
top: 50%;
cursor: pointer;
}
.carousel-right{
50px;
height: 100px;
margin-top: -50px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: teal;
display: block;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
}
.carousel-control{
height: 10px;
overflow: hidden;
}
.carousel-control span{
20%;
height: 10px;
display: inline-block;
background-color: orange;
cursor: pointer;
}
.carousel-control span.cur{
background-color: #f60;
}
/* carousel end */
三：JS
基于JQ，
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
carousel.js代码如下：
function carouselPlay(config){
//设置变量默认数据
var carouselSpeed = config.carouselSpeed || 800;
var carouselFuncton = config.carouselFuncton || 'swing';
var imgWidth = config.imgWidth || 400;
var imgHeight = config.imgHeight || 304;
//以下为常量，一般不必改动
var carouselLi = $('.carousel-scroll-wrap li');
var controlSpan = $('.carousel-control span');
var carouselCount = carouselLi.index()+1;
var curLeft = imgWidth;
var nextLeft = imgWidth*2;
var prevLeft = 0;
var outLeft = 10000;
var curIndex = 0;
var nextIndex = 1;
var prevIndex = carouselCount-1;
//初始化
var jobInite = function(){
$('.carousel-main-wrap').css({
imgWidth,
height: imgHeight
});
$('.carousel-scroll-wrap').css({
imgWidth*3,
height: imgHeight,
left: -imgWidth,
top: 0
});
carouselLi.eq(curIndex).css('left', curLeft);
carouselLi.eq(nextIndex).css('left', nextLeft);
carouselLi.eq(prevIndex).css('left', prevLeft);
}
jobInite();
//向右滚动一张的逻辑
function rightZero(a){
a++;
if(a == carouselCount){
a = 0;
}
return a
}
//向左滚动一张的逻辑
function leftZero(a){
a--;
if(a == -1){
a = carouselCount-1;
}
return a
}
// 小圆点控制图片切换的逻辑，小点控制功能还未写完，但不影响其它功能！
function controlZero(a){
curIndex = a;
if(a === (carouselCount-1)){
nextIndex = 0;
}
else{
nextIndex = a+1;
}
if(a === 0){
prevIndex = carouselCount;
}
else{
prevIndex = a-1;
}
}
//滚动函数
function focusAnimate(carouselLi,index,left){
carouselLi.eq(index).stop(true,true).animate({'left': left}, carouselSpeed, carouselFuncton);
}
//处置窗口以外的图片
function imgOut(carouselLi, index){
carouselLi.eq(index).css('left', outLeft);
}
// 控制按钮函数，功能还未写完，但不影响其它功能！
function controlPlay(curIndex){
controlSpan.eq(curIndex).addClass('cur').siblings().removeClass('cur');
}
//向右切换运动
function rightPlay(){
//滚动前初始化图片索引
jobInite();
//向右切换
focusAnimate(carouselLi, curIndex, prevLeft);
focusAnimate(carouselLi, nextIndex, curLeft);
imgOut(carouselLi, prevIndex);
//重置索引
curIndex = rightZero(curIndex);
nextIndex = rightZero(nextIndex);
prevIndex = rightZero(prevIndex);
// 控制小圆点跟随，功能还未写完，但不影响其它功能！
controlPlay(curIndex);
}
//向左切换运动
function leftPlay(){
//滚动前初始化图片索引
jobInite();
//向左
focusAnimate(carouselLi, curIndex, nextLeft);
focusAnimate(carouselLi, prevIndex, curLeft);
imgOut(carouselLi, nextIndex);
//重置索引
curIndex = leftZero(curIndex);
nextIndex = leftZero(nextIndex);
prevIndex = leftZero(prevIndex);
// 控制小圆点跟随，功能还未写完，但不影响其它功能！
controlPlay(curIndex);
}
// 限制用户频繁点击
var datePrev = 0;
var clickFlag = true;
function clickCheck(minSecond){
var nowDate = new Date();
var dateCur = nowDate.getTime();
var dateInterval = dateCur - datePrev;
datePrev = dateCur;
if(dateInterval<minSecond){
clickFlag = false;
}
else{
clickFlag = true;
}
return clickFlag;
}
// 左右控制切换
$('.carousel-right').click(function(event) {
if(clickCheck(500)){
rightPlay();
}
});
$('.carousel-left').click(function(event) {
if(clickCheck(500)){
leftPlay();
}
});
// 小圆点控制切换，功能还未写完，但不影响其它功能！
controlSpan.mouseover(function(event) {
// 计算新的当前位置索引
curIndex = $(this).index();
//重置索引
controlZero(curIndex);
// 初始化图片位置
jobInite();
// 小圆点位置跟随
controlPlay(curIndex);
});
}
四：在页面中调用
<script type="text/javascript">
$(function(){
//配制变量
var config = {
'carouselSpeed': 800,
'carouselFuncton': 'swing',
'imgWidth': 800,
'imgHeight': 504
}
//轮播图的执行
var main = carouselPlay;
main(config);
})
//更多调用可参考demo
</script>
四：测试地址
http://game.feiliu.com/zk/new/plugin/default.html
五：demo源码下载
https://files.cnblogs.com/files/zk995/demo.rar
六：后续慢慢再增加完成各种功能，还要更新完整
这周，over...