（转）css和js实现最简单的轮播图效果

爱被打了一巴掌 2022-05-22 11:15 136阅读 0赞

# 目录 #

*  [css和js实现最简单的轮播图效果][css_js]
    
     *   *  [实现原理][Link 1]
         *  [效果图][Link 2]
         *  [html代码][html]
         *  [css代码][css]
         *  [js代码][js]
         *  [源码下载][Link 3]
         *  [往期博客地址][Link 4]

### 实现原理 ###

> 将点击的a标签的href属性值赋给img标签的src属性，这样有个好处，就是如果浏览器不支持js的话，点击a标签也可跳转到图片地址看到图片，不会影响内容的呈现

注：需要导入jquery库

### 效果图 ###

![最简单的轮播图效果][SouthEast]

--------------------

### html代码 ###

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

### css代码 ###

/* 先取消默认样式 */
    a { text-decoration: none; }
    ul { list-style-type: none; }
    ul, li {
        padding: 0;
        margin: 0;
    }
    .banner li {
        float: left;
    }
    .banner img {
        width: 600px;
        height: 400px;
    }
    /* relative和absolute用于控制切换按钮位置 */
    .banner {
        position: relative;
        width: 600px;
        height: 400px;
        margin: auto;
    }
    .banner ul {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    .banner ul li {
        margin-left: 5px;}
    .banner ul li a {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #8c8c8c;
        text-align: center;
        border-radius: 50%; /* 让按钮变圆形 */
        color: #FFF
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36

### js代码 ###

导入jquery库

*  1

$(document).ready(function(){
          // 在一开始绑定a的点击切换轮播图事件
        $(".banner>ul>li>a").click(function(){
        
           banner(this);
           return false;
        });
        bannerRoll();
    });
    // 用a标签按钮切换轮播图
    function banner(obj) {
          // obj 当前标签
        var img = $(obj).parent().parent().prev();
        $(img).attr("src", $(obj).attr("href"));
    }
    var t;  // 用于标识定时器
    function bannerRoll() {
        
        t = setInterval(showPic, 3000);     // 设置每三秒调用换图函数换张图
    }
    var x = 0;  // 全局变量，记录当前第几张轮播图
    function showPic() {
        
        // 获取a父标签li的个数，轮流播放
        var arr_uls = $(".banner>ul");
        arr_uls.each(function() {
           // 遍历ul标签，给它的img换张图
            if (x >= $(this).children().length) x = 0;
            $(this).prev("img").attr("src", arr_uls.children("li").eq(x).children("a").attr("href"));
        });
        x++;
    }
    //鼠标经过盒子时，清除定时
    $(".banner").mouseenter( function(){
        
            clearInterval(t);
    }).mouseleave( function(){
        
        //鼠标离开盒子时，再次定时
        bannerRoll();
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *

[css_js]: https://blog.csdn.net/tom9238/article/details/70194504#css%E5%92%8Cjs%E5%AE%9E%E7%8E%B0%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E6%9E%9C
[Link 1]: https://blog.csdn.net/tom9238/article/details/70194504#%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86
[Link 2]: https://blog.csdn.net/tom9238/article/details/70194504#%E6%95%88%E6%9E%9C%E5%9B%BE
[html]: https://blog.csdn.net/tom9238/article/details/70194504#html%E4%BB%A3%E7%A0%81
[css]: https://blog.csdn.net/tom9238/article/details/70194504#css%E4%BB%A3%E7%A0%81
[js]: https://blog.csdn.net/tom9238/article/details/70194504#js%E4%BB%A3%E7%A0%81
[Link 3]: https://blog.csdn.net/tom9238/article/details/70194504#%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD
[Link 4]: https://blog.csdn.net/tom9238/article/details/70194504#%E5%BE%80%E6%9C%9F%E5%8D%9A%E5%AE%A2%E5%9C%B0%E5%9D%80
[SouthEast]: /images/20220522/57e3ef1f20a249feaa2fa4383f2ea11d.png