jQuery实现轮播图-蒲公英云

jQuery实现轮播图

先展示一下轮播图的终结版截图
在这里插入图片描述
轮播图需要实现的功能就不再细讲了，直接看代码吧，仔细看，不要感觉轮播图好难，代码好多就懒得看了，其实很简单。

html代码

<div class="pic">
            <img src="img/微信截图_20190705084205.png"/>
            <img src="img/微信截图_20190705084220.png"/>
            <img src="img/微信截图_20190705100148.png"/>
            <img src="img/微信截图_20190705100208.png"/>
            <div id="left">
            <
            </div>
        <div id="right">
            >
            </div>
            <ul id="ulObj">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

css样式代码

<style type="text/css">
            .pic{ 
                width: 900px;
                height: 370px;
                margin:20px auto;
                position: relative;
            }
            nav{ 
                width: 900px;
                height: 1500px;
                margin:0 auto;
                border: 1px solid red;
            }
            .pic img{ 
                width: 900px;
                height: 370px;
                position: absolute;
            }
            #left{ 
                width: 55px;
                height: 75px;
                border: 1px solid black;
                font-size: 50px;
                padding-left: 10px;
                background-color: rgba(0,0,0,0.5);
                color: red;
                font-weight: bold;
                position: absolute;
                top: 140px;
                cursor: pointer;
            }
            #right{ 
                width: 55px;
                height: 75px;
                border: 1px solid black;
                font-size: 50px;
                padding-left: 10px;
                background-color: rgba(0,0,0,0.5);
                color: red;
                font-weight: bold;
                position: absolute;
                top: 140px;
                right: 0;
                cursor: pointer;
            }
            #ulObj{ 
                width: 150px;
                height: 17px;
                position: absolute;
                bottom: 0px;
                list-style: none;
                left: 350px;
            }
            #ulObj li{ 
                float: left;
                margin-left: 10px;
                width: 15px;
                height: 15px;
                background-color: lightskyblue;
                border-radius: 45px;
            }
            #ulObj li:hover{ 
                background-color: white;
                cursor: pointer;
            }
        </style>

最后就是jquery了

<script type="text/javascript">
            $(function(){ 
                //刚开始设置一个index，index为图片的索引值
                    var index=0;
                    //当图片索引为0时,显示对应的图片,其他的隐藏
                    $(".pic img").hide();
                    $(".pic img").eq(index).show();
                    //图片对应的下面的小圆圈设置背景颜色
                    $("#ulObj li").eq(index).css("background-color","white");
                    //设置一个定时器
                    timer=setInterval(function(){ 
                    var imgObj=$(".pic img");
                    //index的值加1，如果index值大于3就等于0
                    index++;
                        if(index>3){ 
                            index=0;
                        }
                    //设置对应之外的小圆圈背景颜色
                $("#ulObj li").css("background-color","lightskyblue");
                    //设置对应索引的小圆圈背景颜色
                $("#ulObj li").eq(index).css("background-color","white");
                    imgObj.fadeOut(1000);
                    imgObj.eq(index).fadeIn(1000);
                    },3000);
                    //鼠标悬停清除定时器
                $(".pic img").mouseenter(function(){ 
                    clearInterval(timer);
                });
                //鼠标移走重启定时器
                $(".pic img").mouseleave(function(){ 
                    timer=setInterval(function(){ 
                    var imgObj=$(".pic img");
                    index++;
                        if(index>3){ 
                            index=0;
                        }
                    imgObj.fadeOut(1000);
                    imgObj.eq(index).fadeIn(1000);
                    $("#ulObj li").css("background-color","lightskyblue");
                    $("#ulObj li").eq(index).css("background-color","white");
                    },3000);
                });
                //点击下一张
                $("#right").click(function(){ 
                    index+=1;
                    if(index>3){ 
                        index=0;
                    }
                    $(".pic img").fadeOut(1000);
                    $(".pic img").eq(index).fadeIn(1000);
                    $("#ulObj li").css("background-color","lightskyblue");
                    $("#ulObj li").eq(index).css("background-color","white");
                });
                //点击上一张
                $("#left").click(function(){ 
                    index-=1;
                    if(index<0){ 
                        index=3;
                    }
                    $(".pic img").fadeOut(1000);
                    $(".pic img").eq(index).fadeIn(1000);
                    $("#ulObj li").css("background-color","lightskyblue");
                    $("#ulObj li").eq(index).css("background-color","white");
                });
                //点击下面的小圆圈显示对应的图片
                $("#ulObj li").click(function(){ 
                    //获得被点击的li元素的索引值
                    index=$("#ulObj li").index(this);
                    $("#ulObj li").css("background-color","lightskyblue");
                    $("#ulObj li").eq(index).css("background-color","white");
                    //alert(index);
                    $(".pic img").fadeOut(1000);
                    $(".pic img").eq(index).fadeIn(1000);
                });    
        });
        </script>