【一】HTML结构　

 

    
                 
             
     
        
      
            
       
                
        
                
        
                
        
            
       
        
      
        
      
        
      <        
      >    
     

 

【二】css样式

*{
       margin: 0;    padding: 0;}.cont{
       position: relative;    width: 600px;    height: 300px;    padding: 10px;    border: 1px solid #333;    margin: 150px auto;    box-sizing: border-box;    .imgcont{        position: relative;        width: 578px;        height: 278px;        overflow: hidden;        border: 1px solid #333;        .img{            position: absolute;            top: 0;            left: 0;            width: 2500px;            list-style: none;            overflow: hidden;            li{                float: left;            }            li:nth-child(1){
   background-color: #c6a0a0;}            li:nth-child(2){
   background-color: #666;}            li:nth-child(3){
   background-color: #CC4A4A;}            li:nth-child(4){
   background-color: #c6a0a0;}        }    }    .btn{
           width:30px;         height:60px;         background:rgba(0,0,0,0.5);         position:absolute;         top:50%;         margin-top:-25px;         cursor:pointer;         text-align:center;         line-height:60px;         color:#fff;         font-size:40px;         font-family:"宋体";         // display:none;    }    .btnL{
           left: 20px;    }    .btnR{
           right: 20px;    }    .num{
           position: absolute;        bottom: 20px;        left: 50%;        margin-left: -40px;        li{            width: 10px;            height: 10px;            list-style: none;            float: left;            margin-right: 10px;            border-radius: 5px;            background-color: #888;        }        .on{
               background-color: #ccc;        }    }}

 

【三】jQuery效果

1. 完整代码
   【详细代码，直观，容易理解，但代码量比较大】$(function(){    var index = 0;//保存当前图片的下标    //给轮播器的图片添加宽高，使其宽高与图片容器（imgcont）的宽高一致    var $width = $(".imgcont").width();    var $heigth = $(".imgcont").height();    $(".img > li").width($width).height($heigth);    // 复制第一个图片到最后一个图片的后面    var $clone = $(".img > li").first().clone();    $(".img").append( $clone );    //添加底部圆点    var $size = $(".img > li").size();    for( var j=1; j < $size; j++ ){        $(".num").append("
   ")    }    // 自动轮播效果    var timer = setInterval(function(){        index++;        if( index == $size ){            $(".img").css( { left: 0 } );            index = 1;        }        $(".img").stop(true,false).animate({left:-index*$width},300);        if( index == $size-1 ){            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");        }else{            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");        }    },2000)    // 鼠标划入取消自动轮播    $(".cont").hover(function(){        clearInterval(timer);    },function(){        timer = setInterval(function(){            index++;            if( index == $size ){                $(".img").css( { left: 0 } );                index = 1;            }            $(".img").stop(true,false).animate({left:-index*$width},300);        },2000)    })    // 圆点划入的轮播效果    $(".num li").first().addClass("on");    $(".num > li").hover(function(){        var $index = $(this).index();        index = $index;        $(".img").stop(true,false).animate({left:-index*$width},300); //stop(true,false)将未执行的动画队列清空，但不将正在执行的动画跳转到末状态        $(this).addClass("on").siblings().removeClass('on');    })    // 左右按钮的轮播效果    $(".btnL").click(function(){        index++;        if( index == $size ){            $(".img").css( { left: 0 } );            index = 1;        }        $(".img").stop(true,false).animate({left:-index*$width},300);        if( index == $size-1 ){            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");        }else{            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");        }    })    $(".btnR").click(function(){        index--;        if( index == -1 ){            $(".img").css({left:-($size-1)*$width});            index = $size - 2;        }        $(".img").stop(true,false).animate({left:-index*$width},300);        if( index == $size-1 ){            $(".num > li").eq(0).addClass("on").siblings().removeClass("on");        }else{            $(".num > li").eq(index).addClass("on").siblings().removeClass("on");        }    })})

    

2. 精简代码
   //【精简版代码】$(function(){    var index = 0;    var $width = $(".imgcont").width();     var $heigth = $(".imgcont").height();     $(".img > li").width($width).height($heigth);    var $clone = $(".img > li").first().clone();     $(".img").append( $clone );     var $size = $(".img > li").size();     for( var j=1; j < $size; j++ ){         $(".num").append("
   ")     }     //自动轮播     var timer = setInterval(function(){        index++;        move();    },2000)    // 鼠标划入取消自动轮播     $(".cont").hover(function(){         clearInterval(timer);     },function(){         timer = setInterval(function(){             index++;             move();         },2000)     })     // 圆点划入的轮播效果     $(".num li").first().addClass("on");     $(".num > li").hover(function(){         var $index = $(this).index();         index = $index;         $(".img").stop(true,false).animate({left:-index*$width},300);          $(this).addClass("on").siblings().removeClass('on');     })     //     // 左右按钮的轮播效果     $(".btnL").click(function(){         index++;         move();     })     $(".btnR").click(function(){         index--;         move();     })     function move(){         if( index == $size ){             $(".img").css( { left: 0 } );             index = 1;         }         if( index == -1 ){             $(".img").css({left:-($size-1)*$width});             index = $size - 2;         }         $(".img").stop(true,false).animate({left:-index*$width},300);         if( index == $size-1 ){             $(".num > li").eq(0).addClass("on").siblings().removeClass("on");         }else{             $(".num > li").eq(index).addClass("on").siblings().removeClass("on");         }     }})