原生JS实现网站首页轮播图效果

原生JS实现网站首页轮播图效果

!记得修改图片路径ok

html

<div class="index-banner">
                        <ul class="banner-inner">
                            <li class="first" style="background:#aac7f3 url(img/slider/1.png) center center no-repeat;background-size: cover;">
                                <a href="portfolio.html"></a>
                            </li>                       
                            <li class="third" style="background:#aac7f3 url(img/slider/2.png) center center no-repeat;background-size: cover;">                                
                            </li>
                            <li class="third" style="background:#aac7f3 url(img/slider/3.png) center center no-repeat;background-size: cover;">                                
                            </li>
                        </ul>
                    </div>

css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.index-banner,.banner-inner{width:100%;height:600px;overflow:hidden}
.banner-inner li,.banner-inner li a{width:100%;height:100%;display:inline-block}
.banner-inner li{background: #aac7f3;}
.banner-inner li.first{background:url(../img/slider/1.png) center no-repeat;}
.banner-inner li.second{background:url(../img/slider/2.png) center no-repeat;}
.banner-inner li.third{background:url(../img/slider/3.png) center no-repeat;}

.edslider{position:relative;margin:auto;background:#aac7f3;height: 100%;}
.edslider ul{list-style:none;position:relative;padding:0;margin:0}
.edslider>ul{background:#aac7f3;width:100%;height:100%;display:block;overflow:hidden;text-align:center;}
.edslider>ul:after{
    content:"XIAOYU";
    color:#fff;
    font-size:100px;
    line-height:400px;
    letter-spacing:20px;
    filter: alpha(opacity=10);
    -moz-opacity: 0.01;
    opacity: 0.01;
}
.edslider>ul li{background:#aac7f3;display:none;width:100%;height:200px;position:absolute;top:0;left:0;z-index:0}
.edslider a{display:block;position:absolute;top:0;left:0;z-index:0}
.edslider a img{border:0}
.edslider .current{z-index:1!important}
.edslider .controls{
    width:100%;height:100%;
    position: absolute;
    top:0;
    }
.edslider .controls .navigator{background:rgba(0,0,0,.3);background-image:url(../img/sprite-navigator.png);cursor:pointer;display:block;
    width:50px;height:50px;position:absolute;overflow:hidden;
    top:50%;margin-top:-25px;transition:background .2s}
.edslider .controls .next{background-position:0 0;right:0;z-index: 2;}
.edslider .controls .prev{background-position:0 -50px;left:0;z-index: 2;}
.edslider .controls .next:hover,.edslider .controls .prev:hover{
    background-color:rgba(0,0,0,.6)}
.edslider .controls .paginator{ position: absolute;
    text-align: center;
    bottom:0rem;
    width: 100%;
z-index: 2;}
.edslider .controls .paginator li{background:rgba(255,255,255,.6);
    box-sizing:border-box;display:inline-block;
    margin:0 3px;
    width:7px;
    height:7px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-position:-14px 0;cursor:pointer;
    transition:background .1s;background-position:-213px 0}
.edslider .controls .paginator li.current,.edslider .controls .paginator li:hover{
    background:#fff;
    width:30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
.edslider .progress{background:rgba(91,152,247,.5)}
.edslider .progress{position:absolute;top:0;height:3px;z-index:2}

@media screen and (max-width:1024px){
    .index-banner, .banner-inner{height: 20rem;}
    .edslider>ul:after{line-height: 20rem;}
    .edslider .controls .navigator{width: 2.8rem;height: 2.8rem;}
    .edslider .controls .paginator{bottom: 0.2rem;}
    .edslider .controls .next{background-position: 0 -3px;}
    .edslider .controls .prev {
    background-position: 0 -52px;}
}
@media screen and (max-width:1360px){
    .index-banner, .banner-inner{
        height: 16rem;
    }
    .edslider>ul:after{line-height: 16rem;}
}
@media screen and (max-width:1360px){
    .edslider>ul:after{line-height: 12rem;}
    .edslider .controls .navigator{background-size: 88%;}
    .edslider .controls .navigator{width: 2.4rem;height: 2.4rem;}
    .edslider .controls .paginator{bottom: 0rem;}
    .edslider .controls .next{background-position: 2px 2px;}
    .edslider .controls .prev {background-position: 2px -31px;}

}
@media screen and (max-width:1360px){
    .index-banner, .banner-inner{height: 12rem;}
    .edslider>ul:after{line-height: 11rem;}
    }

js

$(function(){
            $("#all li").mouseover(function(){//鼠标进入离开事件
                $(this).css("background-color","#ff00ff").siblings().css("background-color","white");
                $(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();
            });
 
            $(window).scroll(function(){//鼠标滚动事件
                var _top=$(window).scrollTop();//获得鼠标滚动的距离
            });
            
            //手动播放图片
            $(".btn ul li").hover(function(){
                
                $(this).addClass("one").siblings().removeClass("one");
                index=$(this).index();
                i=index;
                $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();  
                });
 
            //自动播放图片
            var i=0;
            var t=setInterval(autoplay,1000);
            function autoplay(){
                i++;
                if(i>5)i=0;        
                $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
                $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
            }
 
                $("#banner").hover(function(){
                    clearInterval(t);
                },function(){
                    t=setInterval(autoplay,1000);
                });
            });