简单的手写jquery轮播图（包含切换按钮、小圆点）

喜欢ヅ旅行 2023-06-08 13:57 27阅读 0赞

## 简单的手写jquery轮播图（包含切换按钮、小圆点） ##

**css代码**

* { 
        margin: 0;
        padding: 0;
    }
    
    .container { 
        width: 800px;
        height: 400px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    .container img { 
        width: 800px;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    
    }   
    .container img:first-child{ 
        display: block;
    }    
    .arrow { 
        width: 41px;
        height: 69px;
        background: url(../img/icon-slides.png) no-repeat;
        cursor: pointer;
    }
    
    .left-arrow { 
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        background-position: -83px 0;  
    }
    .left-arrow:hover{ 
        background-position: 0 0;
    }
    .right-arrow { 
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background-position: -124px 0; 
    }
    .right-arrow:hover{ 
        background-position: -41px 0;            
    }
    ul { 
        width: 120px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%);
    }
    
    ul li { 
        width: 10px;
        height: 10px;
        background: rgba(0, 0, 0, .8);
        border-radius: 50%;
        float: left;
        margin-left: 20px;
        list-style-type: none;
    }
    
    ul li:hover { 
        background: rgba(255, 255, 255, .8);
    }
    
    ul li:first-child { 
        margin: 0;
    }
    
    .active { 
        background: #fff;
    }

**html代码**

<div class="container">
            <div class="container-img">
                <img src="./img/6.jpg" alt="">
                <img src="./img/7.jpg" alt="">
                <img src="./img/8.jpg" alt="">
                <img src="./img/9.jpg" alt="">
            </div>
            <div class="left-arrow arrow"></div>
            <div class="right-arrow arrow"></div>
            <ul>
            </ul>
        </div>

**js代码**

<script>
            var s =$('img');
            for(var j=0; j<s.length; j++){ 
                $('ul').append('<li></li>')
            }
            $('li').eq(0).addClass('active');
            var c = 0;
            var timer = setInterval(run, 2000);
            var count = $('img')
            function run() { 
                c++;
                if (c > count.length-1) { 
                    c = 0;
                }
                $('img').eq(c).fadeIn(1000).siblings('img').fadeOut(1000); //图片淡入淡出
                $('ul>li').eq(c).addClass('active').siblings('li').removeClass('active'); //相邻li取消白点
    
            }
            $('ul>li').mouseover(function () {   //鼠标移动到li上图片跟着动
                c = $(this).index();
                $('img').eq(c).show().siblings('img').hide();
                $('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');
            })
            $('.container img').hover(function () {  //鼠标放上停止轮播
                clearInterval(timer);
            }, function () { 
                timer = setInterval(run, 2000);
            })
    
            $('.right-arrow').mousedown(function () {  //点击右箭头
                c++;
                if (c == count.length) {     
                    c = 0;
                }
                $('img').eq(c).show().siblings('img').hide();
                $('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');
            })
            $('.left-arrow').mousedown(function () {  //点击左箭头
                c--;
                if (c == -1) { 
                    c = count.length - 1;
                }
                $('img').eq(c).show().siblings('img').hide();
                $('ul>li').eq(c).addClass('active').siblings('li').removeClass('active');
            })
        </script>

**实现效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1MzEyNw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ1MzEyNw_size_16_color_FFFFFF_t_70]: /images/20230531/84af0098c9874bdaa39091ff07437cf3.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化实现了以下功能 (1) 点击容器container下方小圆点可以进行切换 (2) 点击左右的

不念不忘少年蓝@/ 2023年10月11日 22:08/ 0 赞/ 106 阅读

相关简单的手写jquery轮播图（包含切换按钮、小圆点）

简单的手写jquery轮播图（包含切换按钮、小圆点） css代码 { margin: 0; padding: 0;

喜欢ヅ旅行/ 2023年06月08日 13:57/ 0 赞/ 28 阅读

相关 html图片圆点切换,图片轮播带小圆点选择左右切换

< ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jpg] > css代码 \\{

我会带着你远行/ 2022年10月05日 10:46/ 0 赞/ 367 阅读

相关 jQuery圆点图片轮播切换插件

[下载地址][Link 1]效果很普通的网站banner图片切换插件，但又是一款很实用的jQuery轮播图插件，可以点击圆点控制图片索引。 ![1631495188.png]

Myth丶恋晨/ 2022年09月11日 06:17/ 0 赞/ 146 阅读

相关简单的图片轮播加小圆点

先说一下思路，使用ViewPager加 LinearLayout 布局共同实现，先看布局 <android.support.v4.view.ViewPa

骑猪看日落/ 2022年08月23日 00:42/ 0 赞/ 269 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 418 阅读

相关 JQ轮播(左右轮播切换，小圆点hover)

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

缺乏、安全感/ 2022年06月03日 00:39/ 0 赞/ 384 阅读

相关 JQuery简单轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

电玩女神/ 2022年05月31日 09:50/ 0 赞/ 371 阅读

相关 jquery 实现轮播图_滑动切换

<!doctype html> <html> <head> <meta charset="utf-8"> <titl

待我称王封你为后i/ 2022年05月11日 12:56/ 0 赞/ 425 阅读

相关手写轮播图

效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

小灰灰/ 2021年09月08日 12:48/ 0 赞/ 544 阅读