你的位置:首页 > Java教程

[Java教程]自已动手写的轮播图插件,功能不断增加中,可以下载


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

图是别人的图,心是自已的心。直接上代码:

一:结构

<!-- carousel begin -->
<div >
    <div >
        <ul >
            <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 >向左</span>
        <span >向右</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{
    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,

<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({
            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);
    });
}

四:在页面中调用

<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源码下载

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

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

这周,over...