CSS+Javascript实现动态轮播图_pycharm动态轮播图-优快云博客

本文介绍如何在CSS静态轮播图基础上，通过JavaScript实现动态轮播图功能。包括两种方法：一是利用border边框操作，二是直接在图片上操作。涉及点击圆圈和箭头切换图片，并通过定时器实现自动轮播。代码示例和注意事项一并提供。

在小编CSS静态轮播图后运用javascript实现动态轮播！！！

css静态轮播请参考小编CSS静态轮播图那篇文章喔！

开发环境：pycharm css+javascript

整体思路：

1.点击圆圈可以选择相对应的图片

2.点击两边箭头可以按顺序弹出图片

本次小编运用两种方法供大家参考

第一种方法：在border边框操作实现图片展示（要将之前border边框中引入的四张图片去掉）

首先获取整个border的标签，还有其中圆圈（用css选择器选中所有四个li标签）和箭头分别对应的标签

在箭头标签上直接加上function函数——add（）和down（）

<script type="text/javascript">
    box = document.getElementsByClassName('slide')[0];
    li = document.querySelectorAll('.tab li');

    count = 1
    function add(){
        count+= 1
        if(count>4){
            count=1
        }
        func(count)
    }
    function down(){
        count+= -1
        if(count<1){
            count=4
        }
        func(count)
    }
    li[0].onclick = function (){func(1)}
    li[1].onclick = function (){func(2)}
    li[2].onclick = function (){func(3)}
    li[3].onclick = function (){func(4)}

    function func(sum) {
        switch(sum){
            case 1:
                box.style['backgroundImage'] = 'url("../image/2.jpg")'
                break
            case 2:
                box.style['backgroundImage'] = 'url("../image/3.jpg")'
                break
            case 3:
                box.style['backgroundImage'] = 'url("../image/5.jpg")'
                break
            case 4:
                box.style['backgroundImage'] = 'url("../image/6.jpg")'
                break
            default:
                alert('错误')
        }

    }

</script>

要实现轮播图片效果还要在函数后面加定时器（1000是以ms为单位，此处为1s）

setInterval(add,1000)

注意script标签在body最后面使用喔！！！

此方法所有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS静态轮播图</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .slide{
            width: 400px;
            height: 300px;
            border: 1px solid white;
            position: relative;
            mar