CSS滑动轮播图实现-优快云博客

slide.css

.ck-slide ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
.ck-slide {
    overflow:hidden;
    position:relative;
}
.ck-slide ul.ck-slide-wrapper {
    top:0;
    left:0;
    z-index:1;
    margin:0;
    padding:0;
    position:absolute;
}
.ck-slide ul.ck-slide-wrapper li {
    position:absolute;
}
.ck-slide .ck-ctrl {
    
}
.ck-slide .ck-prev,
.ck-slide .ck-next {
    top:50%;
    z-index:2;
    width:35px;
    height:70px;
    opacity:.15;
    background:red;
    margin-top:-35px;
    position:absolute;
    border-radius:3px;
    text-indent:-9999px;
    background-repeat:no-repeat;
    transition:opacity .2s linear 0s;
}
.ck-slide .ck-prev {
    left:5px;
    background:url(../images/arrow-left.png) #000 no-repeat center center;
}
.ck-slide .ck-next {
    right:5px;
    background:url(../images/arrow-right.png) #000 no-repeat center center;
}
.ck-slidebox {
    left:50%;
    z-index:30;
    position:absolute;
    bottom:12px;
}
.ck-slidebox ul {
    height:20px;
    padding:0 4px;
    background:rgba(0,0,0,0.5);
    border-radius:8px;
}
.ck-slidebox ul li {
    float:left;
    height:12px;
    margin:4px 4px;
}
.ck-slidebox ul li em {
    width:12px;
    height:12px;
    cursor:pointer;
    background:#fff;
    border-radius:100%;
    text-indent:-9999px;
    display:block;
}
.ck-slidebox ul li.current em {
    background:#FE6500;
}
.ck-slidebox ul li em:hover {
    background:#FE6500;
}
.ck-slidebox .dot-wrap {
    
}
.ck-slidebox .slideWrap{
}

slide.js

;(function($){
    $.fn.ckSlide = function(opts){
        opts = $.extend({}, $.fn.ckSlide.opts, opts);
        this.each(function(){
            var slidewrap = $(this).find('.ck-slide-wrapper');
            var slide = slidewrap.find('li');
            var count = slide.length;
            var that = this;
            var index = 0;
            var time = null;
            $(this).data('opts', opts);
            // next
            $(this).find('.ck-next').on('click', function(){
                if(opts['isAnimate'] == true){
                    return;
                }
                
                var old = index;
                if(index >= count - 1){
                    index = 0;
                }else{
                    index++;
                }
                change.call(that, index, old);
            });
            // prev
            $(this).find('.ck-prev').on('click', function(){
                if(opts['isAnimate'] == true){
                    return;
                }
                
                var old = index;
                if(index <= 0){
                    index = count - 1;
                }else{                                      
                    index--;
                }
                change.call(that, index, old);
            });
            $(this).find('.ck-slidebox li').each(function(cindex){
                $(this).on('click.slidebox', function(){
                    change.call(that, cindex, index);
                    index = cindex;
                });
            });
            
            // focus clean auto play
            $(this).on('mouseover', function(){
                if(opts.autoPlay){
                    clearInterval(time);
                }
                $(this).find('.ctrl-slide').css({opacity:0.6});
            });
            //  leave
            $(this).on('mouseleave', function(){
                if(opts.autoPlay){
                    startAtuoPlay();
                }
                $(this).find('.ctrl-slide').css({opacity:0.15});
            });
            startAtuoPlay();
            // auto play
            function startAtuoPlay(){
                if(opts.autoPlay){
                    time  = setInterval(function(){
                        var old = index;
                        if(index >= count - 1){
                            index = 0;
                        }else{
                            index++;
                        }
                        change.call(that, index, old);
                    }, 2000);
                }
            }
            // 修正box
            var box = $(this).find('.ck-slidebox');
            box.css({
                'margin-left':-(box.width() / 2)
            })
            // dir
            switch(opts.dir){
                case "x":
                    opts['width'] = $(this).width();
                    slidewrap.css({
                        'width':count * opts['width']
                    });
                    slide.css({
                        'float':'left',
                        'position':'relative'
                    });
                    slidewrap.wrap('<div class="ck-slide-dir"></div>');
                    slide.show();
                    break;
            }
        });
    };
    function change(show, hide){
        var opts = $(this).data('opts');
        if(opts.dir == 'x'){
            var x = show * opts['width'];
            $(this).find('.ck-slide-wrapper').stop().animate({'margin-left':-x}, function(){opts['isAnimate'] = false;});
            opts['isAnimate'] = true
        }else{
            $(this).find('.ck-slide-wrapper li').eq(hide).stop().animate({opacity:0});
            $(this).find('.ck-slide-wrapper li').eq(show).show().css({opacity:0}).stop().animate({opacity:1});
        }
       
        $(this).find('.ck-slidebox li').removeClass('current');
        $(this).find('.ck-slidebox li').eq(show).addClass('current');
    }
    $.fn.ckSlide.opts = {
        autoPlay: false,
        dir: null,
        isAnimate: false
    };
})(jQuery);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/slide.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/slide.js"></script>
<style>
.ck-slide {
	width:700px;
	height:320px;
	margin:20px auto 0 auto;
}
.ck-slide ul.ck-slide-wrapper {
	height:320px;
}
</style>
</head>
<body>
<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a  href="javascript:;"><img src="images/1.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a  href="javascript:;"><img src="images/2.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a>
        </li>
        <li style="display:none">
            <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a>
        </li>
    </ul>
    <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
    <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
    <div class="ck-slidebox">
        <div class="slideWrap">
            <ul class="dot-wrap">
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>
                <li><em>5</em></li>
            </ul>
        </div>
    </div>
</div>
<script>
$('.ck-slide').ckSlide({
	autoPlay:true
	/*dir:"x"*/
});
</script>
</body>
</html>

效果图：