常见幻灯片实现

效果1：

实现原理如下图：

红色框为容器，设置内容溢出隐藏，计算出一屏的宽度，通过定位每次滚动一屏的距离

代码:

.scroll_wrap{ 100%;height: 350px;background-color: #88AF36;margin: 50px 0;display: block;}
.scroll_wrap .scroll{ 640px;height: 350px;margin: 0 auto;overflow: hidden;position: relative;}
.scroll_wrap .scroll ul.scroll_img{height: 200px;padding-top: 40px;overflow: hidden;position: absolute;left: 0;}
.scroll_wrap .scroll ul.scroll_img li{ 300px;height: 200px;margin: 0 10px;overflow: hidden;float: left;}
.scroll_wrap .scroll ul.scroll_img li img{ 100%;height: auto;min-height: 200px;}
.scroll_wrap .scroll ul.scroll_num{ 100%;height: auto;padding-top: 30px;text-align: center;position: absolute;top: 68%;}
.scroll_wrap .scroll ul.scroll_num li{ 15px;height: 15px;border-radius: 50%;background-color: #fff;opacity:.5;filter:alpha(opacity=50);display: inline-block;*display:inline;*zoom:1;margin: 0 3px;}
.scroll_wrap .scroll ul.scroll_num li.current{background-color: #F4BC0B;opacity:1;filter:alpha(opacity=100);}
.scroll_wrap .prev{color: #fff;background-color: #2C90D2;padding: 10px 20px;margin: 10px 0 0 10px;cursor: pointer;position: absolute;left: 0;z-index: 3;top: 25%;opacity: .3;
filter: alpha(opacity=30);}
.scroll_wrap .prev:hover{opacity:1;filter:alpha(opacity=100);}
.scroll_wrap .next{color: #fff;background-color: #2C90D2;padding: 10px 20px;margin: 10px 10px 0 0;cursor: pointer;position: absolute;right: 0;z-index: 3;top: 25%;opacity:.3;filter:alpha(opacity=30);}
.scroll_wrap .next:hover{opacity:1;filter:alpha(opacity=100);}


<div class="scroll_wrap">
    <div class="scroll">
        <ul class="scroll_img">
            <li><a href=""><img src="images/01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/04.jpg" alt=""></a></li>
            <li><a href=""><img src="images/05.jpg" alt=""></a></li>
            <li><a href=""><img src="images/06.jpg" alt=""></a></li>
        </ul>
        <span class="prev">上一张</span><span class="next">下一张</span>
    </div>
</div>

<script>
$(function(){
    //获取li宽度
    var li_width = $('.scroll_wrap .scroll ul.scroll_img>li').outerWidth(true);//width()获取元素宽度，innerWidth()获取元素宽度+padding，outerWidth()获取元素宽度+padding+border，outerWidth()获取元素宽度+padding+border+margin
    //获取li数
    var li_num = $('.scroll_wrap .scroll ul.scroll_img>li').length;
    //赋值ul宽度
    $('.scroll_wrap .scroll ul.scroll_img').css({'width':li_width*li_num});
    //输出ul.scroll_num
    var scroll_num_html = '<ul class="scroll_num">';
    for(var i=0;i<li_num/2;i++){
        scroll_num_html += '<li>' + '</li>';
    }
    scroll_num_html += '</ul>';
    $('.scroll_wrap .scroll ul.scroll_img').after(scroll_num_html);
    function scroll(n){
        $('.scroll_wrap .scroll ul.scroll_num>li').finish().filter(':visible').removeClass('current').eq(n).addClass('current');
        $('.scroll_wrap .scroll ul.scroll_img').animate({left:-(li_width*2*n)});
        //$('.scroll_wrap .scroll ul.scroll_img').css({'left':-(li_width*2*n)});
    }
    scroll(0);
    //定时器
    function scrollDs(){
        var num_num = $('.scroll_wrap .scroll ul.scroll_num>li').index($('.scroll_wrap .scroll ul.scroll_num>li.current'));
        num_num += 1;
        if(num_num >= li_num/2){
            scroll(0)
        }else{
            scroll(num_num);
        }
    }
    var imgscroll = setInterval(scrollDs,2000);
    //鼠标经过暂停
    $('.scroll_wrap .scroll ul.scroll_img').hover(function(){
        clearInterval(imgscroll);
    },function(){
        imgscroll = setInterval(scrollDs,2000);
    })
    //上一张
    $('.scroll_wrap .scroll>.prev').on('click',function(){
        var num_num = $('.scroll_wrap .scroll ul.scroll_num>li').index($('.scroll_wrap .scroll ul.scroll_num>li.current'));
        num_num -= 1;
        if(num_num < 0){
            scroll(li_num/2-1)
        }else{
            scroll(num_num);
        }
    })
    //下一张
    $('.scroll_wrap .scroll>.next').on('click',function(){
        var num_num = $('.scroll_wrap .scroll ul.scroll_num>li').index($('.scroll_wrap .scroll ul.scroll_num>li.current'));
        num_num += 1;
        if(num_num >= li_num/2){
            scroll(0)
        }else{
            scroll(num_num);
        }
    })
})
</script>

效果2：

该效果实现原理为所有内容重叠在一起，通过z-index把需要展示的放在最上一层。

代码：

.slidewrap{300px;height:180px;background-color:#000;overflow:hidden;position:relative;}
.slidewrap ul.slide{position:relative;100%;}
.slidewrap ul.slide li a img{100%;height:auto;min-height: 580px;}
.slidewrap ul.slide li{position:absolute;top:0;left:0;100%;display:none;z-index:0;}
.slidewrap ul.slide li.current{display: block;}
.slidewrap ul.num{100%;height:auto;position:absolute;bottom:5px;left:0;text-align:center;z-index:2;}
.slidewrap ul.num li{display: inline-block;*display:inline;*zoom:1;26px;height:26px;background-color:#fff;margin: 0 1px;color: #000;text-align: center;line-height: 26px;cursor: pointer;}
.slidewrap ul.num li.current{background-color:#F4BC0B;color: #fff;}
.slidewrap .prev{color: #fff;background-color: #2C90D2;padding: 5px 10px;cursor: pointer;position: absolute;left: 0;z-index: 3;top: 35%;}
.slidewrap .next{color: #fff;background-color: #2C90D2;padding: 5px 10px;cursor: pointer;position: absolute;right: 0;z-index: 3;top: 35%;}


<div class="slidewrap">
    <ul class="slide">
        <li>
            <a href=""><img src="images/01.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/02.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/03.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/04.jpg" alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/05.jpg" alt=""></a>
        </li>
    </ul>
    <span class="prev">上一张</span><span class="next">下一张</span>
</div>

$(function(){
    //获取li数量
    var slidenum = $('.slidewrap ul.slide>li').length;
    //输出li
    var numhtml = '<ul class="num">'
    for(var i=1;i<=slidenum;i++){
        numhtml += '<li>' + i + '</li>';
    }
    numhtml += '</ul>';
    //页面输出li
    $('.slidewrap ul.slide').after(numhtml);
    //效果
    function slideshow(n){
        if(n==$('.slidewrap ul.num>li').index($('.slidewrap ul.num>li.current'))){
            return null;
        }
        $('.slidewrap ul.slide>li').removeClass('current').eq(n).addClass('current');
        $('.slidewrap ul.num>li').removeClass('current').eq(n).addClass('current');
    }
    //初始为0
    slideshow(0);
    //li点击触发
    $('.slidewrap ul.num>li').on('click',function(){
        var num = $('.slidewrap ul.num>li').index(this);
        slideshow(num);
    })
    //上一张
    $('.slidewrap .prev').on('click',function(){
        var num = $('.slidewrap ul.num>li').index($('.slidewrap ul.num>li.current'));
        num -= 1;
        var len = $('.slidewrap ul.num>li').length;
        if(num<0){
            slideshow(len-1);
        }else{
            slideshow(num);
        }
    })
    //下一张
    $('.slidewrap .next').on('click',function(){
        var num = $('.slidewrap ul.num>li').index($('.slidewrap ul.num>li.current'));
        num += 1;
        var len = $('.slidewrap ul.num>li').length;
        if(num==len){
            slideshow(0);
        }else{
            slideshow(num);
        }
    })
    //定时器
    setInterval(function(){
        var num = $('.slidewrap ul.num>li').index($('.slidewrap ul.num>li.current'));
        num += 1;
        var len = $('.slidewrap ul.num>li').length;
        if(num==len){
            slideshow(0);
        }else{
            slideshow(num);
        }
    },5000)
})

这种效果可以配上一些css3即可定制自己喜欢的幻灯片动画效果。