轮播图淡入淡出效果-优快云博客

图片的轮播效果实现
2.让图片动起来

3.实现图片的淡入淡出
这里写图片描述
4.产生小圆点

5.小圆点动起来

6.鼠标悬停效果

7.侧栏效果

代码：<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="js/jquery-3.2.1 (1).js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
    <style type="text/css">
        *{border: none; margin: 0px auto; padding: 0px auto;}
        body{text-align: center;}
        .main{width: 790px; height: 340px; background-color: bisque; margin-top: 20px; position: relative;}
        .show_img{width: 100%; height: 100%; background-color: blue;}
        .show_button{position: absolute; 
        bottom: 30px; left: 300px;
        width: 192px; height: 20px; 
        background-color: brown;  
        border-radius: 10px;}
        .show_button_left{
        height: 60px;
        width: 30px;
        background-color: white;
        position: absolute;
        left: 0px;
        top: 130px;
        opacity: .2;
        line-height:60px ;
        }
        .show_button_left:hover{opacity: .8;}
        .show_button_right{
        height: 60px;
        width: 30px;
        background-color: white;
        position: absolute;
        right: 0px;
        top: 130px;
        opacity: .2;
        line-height:60px ;
        }
        .show_button_right:hover{opacity: .8;}
        #my_img1{position: absolute; left: 0px; top: 0px;}
        #my_img2{position: absolute; left: 0px; top: 0px; }
        .show_button span{width: 10px; height: 10px; 
        border-radius: 10px; 
        background-color: white;
        margin-left: 10px;
        display: block;
        float: left;
        cursor: pointer;
        margin-top: 6px;

        }
        .show_button span:hover{background-color: red;}
        .show_button_span_hover{background-color: red;}
</style>

<body>
    <div class="main">
        <div class="show_img">
            <img id="my_img1" src="img/1.jpg" />
            <img id="my_img2" src="img/2.jpg" style="display: none;" />
        </div>
        <div class="show_button">

        </div>
        <div class="show_button_left">
            <
        </div>
        <div class="show_button_right">
            >   
        </div>
    </div>

    <script type="text/javascript">
        var i=8002;
        var arr=new Array(  'img/1.jpg','img/2.jpg','img/3.jpg',
                            'img/4.jpg','img/5.jpg','img/6.jpg',
                            'img/1.jpg','img/2.jpg','img/3.jpg');
        //创建圆点
        function make_ra(){
            var make_th="<span>&nbsp;</span>"
            for(j=1;j<arr.length;j++){
                make_th+="<span>&nbsp;</span>"
            }
            $(".show_button").html(make_th);
        }
        make_ra();
        function    test(){
            var j=i%arr.length;
            //切换之前
            $("#my_img1").attr("src",$("#my_img2").attr("src"));
            $("#my_img2").attr("src",arr[j]);
            //这两张图片一个是渐入一个是渐出
            $("#my_img1").show().fadeOut(2000);
            $("#my_img2").hide().fadeIn(2000);

            $(".show_button span").css('background-color','white');
            $(".show_button span").eq(j).css('background-color','red');
            i++;    
        }
            var s=  setInterval("test()",3000);
            //鼠标悬停，图片不动
        $(".show_button,show_img,.show_button_left,.show_button_right").hover(function(){
            clearInterval(s);
        },function(){
            s=setInterval("test()",3000);
        })
        //实现圆点的点击事件
        $(".show_button span").click(function(){
            var index=$(this).index();
            console.log(index);
            $("#my_img1").attr("src",$("#my_img2").attr("src"));
            $("#my_img2").attr("src",arr[index]);
            $("#my_img1").show().fadeOut(2000);
            $("#my_img2").hide().fadeIn(2000);
        })
        //实现侧栏点击事件
        $(".show_button_right").click(function(){
            test();
        })
        $(".show_button_left").click(function(){
            var j=i%arr.length;
            //切换之前
            $("#my_img1").attr("src",$("#my_img2").attr("src"));
            $("#my_img2").attr("src",arr[j]);
            //这两张图片一个是渐入一个是渐出
            $("#my_img1").show().fadeOut(2000);
            $("#my_img2").hide().fadeIn(2000);

            $(".show_button span").css('background-color','white');
            $(".show_button span").eq(j).css('background-color','red');
            i--;
        })
    </script>
</body>

web第七天