jQuery实现轮播图效果

任务实现：用jQuery实现轮播图。

来自瓶子啊之小白，欢迎来访，欢迎指导。

相信大家从事前端的开发者初级就是轮播图，首先我用jquery写了一个，第二篇我会用原生JavaScript给大家展示。其原理是一样的，只不过jquery封住好了一些属性和方法。获取节点和实现效果就比较方便快捷了。

下面是展示代码和介绍：

html部分代码：

<div class="slideshow">
    <div class="btn">
        <span class="last-img">&lt;</span><span class="next-img">&gt;</span>
    </div>
    <div class="ra-show">
        <i class="active">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
    <ul>
        <li style="display: block;">
            <a href="#"><img src="img/wangou1.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="img/wangou2.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="img/wangou3.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="img/wangou4.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="img/wangou5.jpg" /></a>
        </li>
    </ul>
</div>

css部分代码：

* {
    padding: 0;
    margin: 0;
}

.slideshow {
    height: 300px;
    width: 500px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}

.slideshow .btn {
    height: 50px;
    width: 100%;
    position: absolute;
    top: 45%;
    z-index: 2;
}

.slideshow .ra-show {
    height: 20px;
    width: ;
    position: absolute;
    bottom: 20px;
    left: 45%;
    z-index: 2;
}

.ra-show i {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50px;
    background: #efefef;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
}

.slideshow .ra-show .active {
    background: #ff9000;
    box-shadow: 0 0 10px #FF9000;
}

.btn span {
    height: 50px;
    width: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #ffffff;
}

.btn span:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.btn .last-img {
    float: left;
}

.btn .next-img {
    float: right;
}

.slideshow ul {
    position: relative;
}

.slideshow ul li {
    height: 300px;
    width: 500px;
    list-style: none;
    position: absolute;
    display: none;
}

.slideshow ul li:hover {
    cursor: pointer;
}

.slideshow ul li img {
    height: 300px;
    width: 500px;
}

js部分代码：

//引入jQuery文件
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //声明一个变量，下面的时候通过算术方法改变变量的值
    var current = 0;
    //初始化数据
    var timer = null;
    var pre = null;
    var nex = null;
    $(document).ready(function() {
        var li_v = $('.slideshow ul li');
        var i_v = $('.ra-show i');
        //设置自动播放
        function mover() {
            //首先清除当前current以外的li_v的样式显示和伪圆标i_v的效果, 以下的同上
            li_v.hide();
            //                i_v.eq(current).removeClass("active");
            i_v.removeClass("active");
            current = (current + 1) % (li_v.length);
            console.log(current);
            //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现了移出鼠标的时候跳转到下一个图片轮播
            i_v.mouseover(function() {
                current = $(this).index();
                //                    console.log($(this).index());
            });
            //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现下一个图片轮播
            li_v.eq(current).fadeIn(1000);
            i_v.eq(current).addClass("active");
        };
        //设置自动轮播
        timer = setInterval(mover, 2000);
        //鼠标划入的时候停止轮播
        li_v.mouseover(function() {
            clearInterval(timer);
        });
        //鼠标移出的时候继续轮播
        li_v.mouseout(function() {
            timer = setInterval(mover, 2000);
        });
        //实现左右按钮事件
        //点击左按钮事件
        $(".last-img").click(function() {
            //    首先清除定时器
            clearInterval(timer);
            clearInterval(pre);
            //实现点击按钮显示上一个图片代码
            function last_v() {
                li_v.hide();
                i_v.removeClass("active");
                current = (current - 1 + li_v.length) % (li_v.length);
                //console.log(current);
                li_v.eq(current).fadeIn(1000);
                i_v.eq(current).addClass("active");
            };
            pre = setTimeout(last_v, 10);
            timer = setInterval(mover, 2000);
        });
        //点击右按钮事件
        //只需继续轮播就可以
        $(".next-img").click(function() {
            //    首先清除定时器
            clearInterval(timer);
            clearInterval(nex);
            //console.log(current);
            //调用自动轮播的代码和点击上一张图片代码的setTimeout
            nex = setTimeout(mover, 10);
            timer = setInterval(mover, 2000);
        });
        //添加伪类下标圆标动事件
        //鼠标碰到伪圆标的时候显示所对应的图片并且停止页面。
        i_v.mouseover(function() {
            clearInterval(timer);
            i_v.removeClass("active");
            li_v.hide();
            li_v.eq($(this).index()).fadeIn(1000);
            $(this).addClass("active");
            //console.log($(this).index());
        });
    });
</script>

完成实现，欢迎来访！！！