ppt设计步骤分析

1、用html写两个类，一个用于放ppt1,ppt2和ppt3，另一个用于放1,2,3用于切换键

 <script src="../public/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="public/css/index.css">

 <div class="carousel">
                    <div class="window">
                        <div class="image_reel">
                            <a href="#">
                                <img src="public/img/ppt1.jpg">              
                                  </a>
                                 <a href="#">
                                <img src="public/img/ppt2.jpg">                
                                </a>
                                 <a href="#">
                                <img src="public/img/ppt3.jpg">              
                                  </a>
                                 <a href="#">
                                <img src="public/img/ppt1.jpg">               
                                 </a>
                        </div>
                    </div>


                 <div class="paging">
                       <a href="#" rel='1'>1</a>
                        <a href="#" rel='2'>2</a>
                        <a href="#" rel='3'>3</a>
                    </div>

 </div>

2.用css设置样式

/*幻灯片设计*/


.carousel .window{
  height: 470px;
  width: 1050px;
  overflow: hidden;
  position: relative;
}
.carousel .image_reel{
  position: relative;
  top:0;
  left:0;
}
.carousel .image_reel img{
  float: left;
}
.carousel .paging{
  position: absolute;
  width: 150px;
  height: 50px;
  bottom: 0px;
  right: 50%;
  margin-right: -75px;
  z-index:1;
  text-align:center;
  line-height: 40px;
  display: none;
}
.carousel .paging a{
  padding: 0px 5px;
  text-decoration: none;
  color: #fff;
}
.carousel .paging a.active{
  font-weight: bold;
  background: #920000;
  border: 1px solid #610000;
  border-radius: 3px;
}
.paging a:hover{
  font-weight:bold;
}
.paging a{
  border-radius: 50%;
}

3、JS jQuery进行动画滑动切换

<script>

 $(".paging").show();
    $(".paging a:first").addClass("active");
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").length;
    var imageReelWidth = imageWidth * imageSum;
    $(".image_reel").css({'width': imageReelWidth});
    //第二步
    rotate = function(end){
        if(end){
            var triggerID = imageSum - 1;
            var image_reelPosition = triggerID * imageWidth;
            $(".paging a").removeClass('active');
            $active.addClass('active');
            $(".image_reel").animate({
                left:-image_reelPosition
            }, 500 ,function(){
                $(this).css({'left':'0px'});
            });
        }else{
           var triggerID = $active.attr("rel") - 1;
           var image_reelPosition = triggerID * imageWidth;
            $(".paging a").removeClass('active');
            $active.addClass('active');
            $(".image_reel").animate({
                left: -image_reelPosition
            }, 500 );
        }
    };
    rotateSwitch = function(){
        play = setInterval(function(){
            $active = $('.paging a.active').next();
            rel = $('.paging a.active').attr('rel');
         //  document.title=rel;
            if( rel==3){
                $active = $('.paging a:first');
                end=true;
            }else{
                end=false;
            }
            rotate(end);
        },2000);
    };
    rotateSwitch();
//第三步
    $(".image_reel a").hover(function(){
        clearInterval(play);
    },function(){
        rotateSwitch();
    });
    $(".paging a").click(function(){
        $actiive = $(this);
        clearInterval(play);
        rotate(false);
        rotateSwitch();
        return false;
    });


</script>