效果1：

 

实现原理如下图：

 

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

代码:

.scroll_wrap{width: 100%;height: 350px;background-color: #88AF36;margin: 50px 0;display: block;}.scroll_wrap .scroll{width: 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{width: 300px;height: 200px;margin: 0 10px;overflow: hidden;float: left;}.scroll_wrap .scroll ul.scroll_img li img{width: 100%;height: auto;min-height: 200px;}.scroll_wrap .scroll ul.scroll_num{width: 100%;height: auto;padding-top: 30px;text-align: center;position: absolute;top: 68%;}.scroll_wrap .scroll ul.scroll_num li{width: 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);}
     
    
      
        
       
            
        
            
        
            
        
            
        
            
        
            
        
        
       
        
       上一张
       下一张    
      
     

 

效果2：

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

代码：

.slidewrap{width:300px;height:180px;background-color:#000;overflow:hidden;position:relative;}.slidewrap ul.slide{position:relative;width:100%;}.slidewrap ul.slide li a img{width:100%;height:auto;min-height: 580px;}.slidewrap ul.slide li{position:absolute;top:0;left:0;width:100%;display:none;z-index:0;}.slidewrap ul.slide li.current{display: block;}.slidewrap ul.num{width: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;width: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%;}
     
    
      
        
       
                    
        
       
                    
        
       
                    
        
       
                    
        
       
                    
    
      
    
      上一张
      下一张
     
$(function(){    //获取li数量    var slidenum = $('.slidewrap ul.slide>li').length;    //输出li    var numhtml = '
     
      '    for(var i=1;i<=slidenum;i++){        numhtml += '
      
' + i + '
';    }    numhtml += '
     
';    //页面输出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即可定制自己喜欢的幻灯片动画效果。