原生js+jquery实现轮播图+思路详解（超简单）

矫情吗；* 2021-12-07 14:07 279阅读 0赞

![轮播图的样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70]  
**序言**：  
现在有很多方法可以写一个轮播图，框架，css3 ，bootstarp等都可以做出一个漂亮的轮播图，为了提高js能力 现在用原生js和jq各写一个轮播图。  
**思路详解：**

*  先实现轮播图可以自左到右轮播，轮播到最后一张图时，反向轮播，转移至反复循环。
 *  可以用左右键来控制图片轮播的方向。
 *  点击下方的小按钮来选择某张图片

**HTML部分**：

<div class="box">
        <div class="arr">
            <span title="1" class="left"><</span>
            <span title="0" class="right" style="float: right">></span>
        </div>
    
        <ul class="ul_img">
            <li class="li_img"><img src="images/01.jpg" alt=""></li>
            <li class="li_img"><img src="images/02.jpg" alt=""></li>
            <li class="li_img"><img src="images/03.jpg" alt=""></li>
            <li class="li_img"><img src="images/04.jpg" alt=""></li>
        </ul>
        <ul class="ul_cat">
            <li class="li_cat"></li>
            <li class="li_cat"></li>
            <li class="li_cat"></li>
            <li class="li_cat"></li>
        </ul>
    </div>
    </body>

**CSS部分**：

<style>
            *{
                margin: 0;
                padding:0;
                list-style: none;
                text-decoration: none;
            }
            img {
                width: 100%;
            }
    
            .li_img {
                width: 800px;
                float: left;
                list-style: none;
            }
    
            .ul_img {
                width: 6000px;
                padding: 0px;
                margin: 0px;
                transition: all 2s;
            }
    
            .box {
                width: 800px;
                overflow: hidden;
                position: relative;
                top: 100px;
                left: 350px;
            }
    
            .arr {
                z-index: 9999;
                position: absolute;
                padding-top: 230px;
                width: 800px;
            }
    
            .arr span {
                font-size: 3em;
                color: seashell;
            }
    
            .arr span:hover {
                cursor: pointer;
                background-color: rgba(192, 192, 192, 0.29);
            }
    
            .ul_cat  {
                width: 250px;
                height: 25px;
                border-radius: 20px;
                background-color:rgba(255,255,255,0.5);
                position: absolute;
                left: 35%;
                bottom: 10%;
            }
            .li_cat{
                width: 12px;
                height: 12px;
                margin-top:5px;
                background-color: #fff;
                border-radius: 50%;
                margin-left: 40px;
                float: left;
            }
            .li_cat:hover {
                background-color: aqua;
    
            }
        </style>

**JS部分**：

<script>
        //设置count来显示当前图片的序号
        var count = 0;
        //动画的执行方向
        var stargo = false;
        //计时器对象
        var timer;
        window.onload = function () {
            //获取各个元素
            var ul_img = document.getElementsByClassName("ul_img")[0];
            var li_img = document.getElementsByClassName("li_img");
            var arr = document.getElementsByClassName("arr");
            var li_cat = document.getElementsByClassName("li_cat");
            li_cat[0].style.backgroundColor = "aqua";
            //这是定时器
            showtime();
            function showtime() {
                timer = setInterval(function () {
                    if (stargo == false) {
                        count++;
                        ul_img.style.transform = "translate(" + -800 * count +"px)";
                        if (count >= li_img.length - 1) {
                            count = li_img.length - 1;
                            stargo = true;
                        }
                    }
                    else {
                        count--;
                        ul_img.style.transform = "translate(" + -800 * count + "px)";
                        if (count <= 0) {
                            count = 0;
                            stargo = false;
                        }
                    }
    
                    for (var i = 0; i < li_cat.length; i++) {
                        li_cat[i].style.backgroundColor = "#fff";
                    }
    
                    li_cat[count].style.backgroundColor = "aqua";
    
                }, 1000)
            }
            //这是左右点击
            for (var i = 0; i < arr.length; i++) {
                arr[i].onmouseover = function () {
                    clearInterval(timer);
                }
                arr[i].onmouseout = function () {
                    showtime();
                }
                arr[i].onclick = function () {
                    if (this.title == 0) {
                        count++;
                        if (count > 3) {
                            count = 0;
                        }
                    }
                    else {
                        count--;
                        if (count < 0) {
                            count = 3;
                        }
                    }
    
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
    
                    for (var i = 0; i < li_cat.length; i++) {
                        li_cat[i].style.backgroundColor = "#fff";
                    }
                    li_cat[count].style.backgroundColor = "aqua";
                }
            }
            //鼠标onmousever事件
            for (var b = 0; b < li_cat.length; b++) {
                li_cat[b].index = b;
                li_cat[b].onmouseover = function () {
                    clearInterval(timer);
                    //让count值对应
                    //为了控制方向
                    if (this.index == 3) {
                        stargo = true;
                    }
                    if (this.index == 0) {
                        stargo = false;
                    }
                    count = this.index;
                    ul_img.style.transform = "translate(" + -800 * this.index + "px)";
                    for (var a = 0; a < li_cat.length; a++) {
                        li_cat[a].style.backgroundColor = "#fff";
                    }
                    li_cat[this.index].style.backgroundColor = "aqua";
                }
                li_cat[b].onmouseout = function () {
                    //添加计时器
                    showtime();
                }
            }
        }
    </script>

**最后jq的原理和js是一样的：**  
**JQ部分**：

<script>
        var count=0;
        var timer;
        function showtime() {
            timer=setInterval(function () {
                show();
                count++;
                if(count==4){
                    count=0;
                }
            },2000)
        }
        function show() {
            $('.li_img').eq(count).stop().fadeIn(1000).siblings('.li_img').fadeOut(1000);
        }
        $(document).ready(function () {
            showtime();
            $('.li_cat').hover(function(){
                //获取当前i的值，并显示，同时还要清除定时器
                count = $(this).index();
                show();
                clearInterval(timer);
            },function(){
                //
                showtime();
            });
    
            //鼠标点击左侧的箭头
            $('.arr').click(function(){
                clearInterval(timer);
                if(count == 0){
                    count = 4;//注意此时i的值
                }
                count--;
                show();
                showtime();
            });
    
            //鼠标点击右侧的箭头
            $('.arr').click(function(){
                clearInterval(timer);
                if(count == 4){
                    count = -1;//注意此时i的值
                }
                count++;
                show();
                showtime();
            });
        })
    </script>
    ``

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70]: /images/20211207/ac5b0e395b3043a3b1e084b9e550c4d3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现简单的轮播图

注意我们用原生JS来做一个简单的无缝轮播图，首先需要准备几张**图片作为材料**，图片的链接需要自己设置，所以这边我的代码中图片链接的位置请大家自己添加图片。 ...

迷南。/ 2024年04月18日 13:57/ 0 赞/ 131 阅读

相关原生js实现轮播图，思路（伪详解）

原生js轮播图效果简单的一个原生js轮播图效果，欢迎大佬指点江山，如果有萌新不懂的地方欢迎私信；结构部分准备好一个简单的HTML结构部分，记住图

比眉伴天荒/ 2023年07月10日 05:24/ 0 赞/ 39 阅读

相关 js原生代码实现简单轮播图

-------------------- 1.先给最基本的样式，点击左右按钮的时候，图片开始动，切换css 样式display:none和display:block,达到基本

Dear 丶/ 2022年12月28日 14:16/ 0 赞/ 288 阅读

相关 js实现轮播图（幻灯片）思路原生+es6

网页中经常可以看到的轮播图效果点击小按钮切换非JQuery中fadeIn效果图片链接 https://s3.ax1x.com/2020/12/06/DXl03

朴灿烈づ我的快乐病毒、/ 2022年12月26日 15:27/ 0 赞/ 182 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 349 阅读

相关原生vue实现简单的轮播图

实质：通过左右按钮实现图片的上下切换，先将图片地址存储在数组中，然后利用索引实现的图片的切换，和之前用JavaScript实现轮播图的原理一样， https://blog.

小灰灰/ 2022年08月28日 07:44/ 0 赞/ 217 阅读

相关用原生JavaScript实现简单轮播图

html代码 <div id="banner"> <ul> <li><img src="images/1.jpg"></li>

野性酷女/ 2022年05月27日 11:20/ 0 赞/ 289 阅读

相关简单轮播图实现原理详解

轮播图实现思路：第一步：设计轮播图片的容器； <div id="myCarousel" class="carousel" data-ride="carousel"> 注

快来打我*/ 2022年05月17日 11:15/ 0 赞/ 265 阅读

相关原生js实现简单轮播图效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

Love The Way You Lie/ 2022年04月06日 07:49/ 0 赞/ 344 阅读

相关原生js+jquery实现轮播图+思路详解（超简单）

![轮播图的样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

矫情吗；*/ 2021年12月07日 14:07/ 0 赞/ 280 阅读