简单轮播图效果

　一、效果1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    ul{margin:0;padding:0;}
    li{list-style:none;}
    img{display:block;border:none 0;}
    .banner{width:400px;height:300px;margin:0 auto;border:1px solid orange;}
    .banner img{display:none;}
    .bannerCtrl{width:60px;margin:0 auto;overflow:hidden;}
    .bannerCtrl li{width:10px;height:10px;float:left;margin:5px 5px;background-color:skyblue;}
</style>
</head>
<body>
    <div class="banner">
        <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
        <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px">
        <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px">
    </div>
    <ul class="bannerCtrl">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".banner img:first").css("display","block");
            $(".bannerCtrl li:first").css("background-color","pink");
        });
        $(function(){
            $(".bannerCtrl li").mouseover(function(){
                var n=$(".bannerCtrl li").index($(this));
                $(".banner img").hide();
                $(".banner img").eq(n).show();
                $(this).css("background-color","pink");
                $(this).siblings("li").css("background-color","skyblue");
            });
        });
    </script>
</body>
</html>

二、效果2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    img{display:block;border:none 0;}
    .outBox{border:2px solid orange;width:400px;height:300px;overflow:hidden;position:relative;}
    .imgBox{width:1200px;height:300px;position:absolute;left:0;top:0;}
    .imgBox img{float:left;}
</style>
</head>
<body>
    <div class="outBox">
        <div class="imgBox">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
            <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px">
            <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px">
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            function run(){
                /*滚动一次*/
                $(".imgBox").animate({left:"-400px"},500,function(){
                    /*将第一张图放在最后一张图的后面*/
                    $(".imgBox img:first").insertAfter($(".imgBox img:last"));
                    /*将图像框归位*/
                    $(".imgBox").css({left:"0"});
                });
            }
            /*定时器*/
            var interval=setInterval(run,1000);  //每隔2000毫秒执行一次
            $(".imgBox").hover(function(){
                if(interval){
                    clearInterval(interval);  //鼠标置于上时取消定时器
                    interval=null;
                }
            },function(){
                if(interval){
                    clearInterval(interval);
                    interval=null;
                }
                interval=setInterval(run,1000);  //鼠标离开后重新开始定时器
            });
        });
    </script>
</body>
</html>

三、效果3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    img{display:block;border:none 0;}
    .box{width:400px;height:300px;border:2px solid orange;overflow:hidden;position:relative;}
    .imgBox{width:1200px;height:300px;}
    .imgBox img{float:left;}
    .leftBtn,.rightBtn{width:30px;height:150px;line-height:150px;background-color:skyblue;text-align:center;cursor:pointer;position:absolute;}
    .leftBtn{left:0;top:75px;color:gray;}
    .rightBtn{right:0;top:75px;color:white;}
</style>
</head>
<body>
    <div class="box">
        <div class="imgBox">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px">
            <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px">
            <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px">
        </div>
        <a class="leftBtn"><<</a>
        <a class="rightBtn">>></a>
    </div>

    <script type="text/javascript">
        $(function(){
            /*获取imgBox中共有几个img子元素*/
            var i=0;
            i=parseInt($(".imgBox").children("img").length);
            var j=0;
            /*按向右箭头，图片向左滑动*/
            $(".rightBtn").click(function(){
                j=j+1;
                if(j<i){  
                    $(".imgBox").animate({marginLeft:-400*j},1000);
                    if((j+1)>=i){
                        $(".leftBtn").css("color","white");
                        $(".rightBtn").css("color","gray");
                    }else if((j-1)<0){
                        $(".leftBtn").css("color","gray");
                        $(".rightBtn").css("color","white");
                    }else{
                        $(".leftBtn").css("color","white");
                        $(".rightBtn").css("color","white");
                    }
                }else{
                    j=i-1;
                }
            });
            /*按向左箭头，图片向右滑动*/
            $(".leftBtn").click(function(){
                j=j-1;
                if(j>=0){
                    $(".imgBox").animate({marginLeft:-400*j},1000);
                    if((j+1)>=i){
                        $(".leftBtn").css("color","white");
                        $(".rightBtn").css("color","gray");
                    }else if((j-1)<0){
                        $(".leftBtn").css("color","gray");
                        $(".rightBtn").css("color","white");
                    }else{
                        $(".leftBtn").css("color","white");
                        $(".rightBtn").css("color","white");
                    }
                }else{
                    j=0;
                }
            });

        });
    </script>
</body>
</html>