自已动手写的轮播图插件，功能不断增加中，可以下载

前，平时总是使用别人的轮播图插件，这次决定自已写一个，功能越多越好。实际现起来，发现并不容易。先实现基本的功能，下两周要丰富起来。

图是别人的图，心是自已的心。直接上代码：

一：结构

<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>

注意，1 必须是三张以上图片，2 最外层carousel-wrap必须要有一个宽高

二：CSS

/* css reset start*/

@charset "UTF-8";*{ padding:0; margin:0; list-style:none; border:0;}body{ width: 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{ width: 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{ width: 800px; height: 504px; display: block;}.carousel-left{ width: 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{ width: 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{ width: 20%; height: 10px; display: inline-block; background-color: orange; cursor: pointer;}.carousel-control span.cur{ background-color: #f60;}/* carousel end */

三：JS

基于JQ，

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({ width: imgWidth, height: imgHeight }); $('.carousel-scroll-wrap').css({ width: 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); });}

四：在页面中调用

//更多调用可参考demo</script>

四：测试地址

http://game.feiliu.com/zk/new/plugin/default.html

五：demo源码下载

http://files.cnblogs.com/files/zk995/demo.rar

六：后续慢慢再增加完成各种功能，还要更新完整

这周，over...

自已动手写的轮播图插件，功能不断增加中，可以下载

自已动手写的轮播图插件，功能不断增加中，可以下载

相关推荐