javascript 实现图片2秒自动切换鼠标悬浮切换图片

最新推荐文章于 2023-04-19 14:21:21 发布

尨挚

最新推荐文章于 2023-04-19 14:21:21 发布

阅读量4k

点赞数 6

本文链接：https://blog.csdn.net/u014486460/article/details/83064753

版权

本文介绍如何使用JavaScript实现图片每隔2秒自动切换，并在鼠标悬浮时停止切换的功能。通过设置定时器和监听鼠标事件，可以创建一个响应式的图片轮播效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片2s自动切换</title>
    <script type="text/javascript">
        var img = ["image/mao1.jpg","image/mao2.jpg","image/mao3.jpg"]
        var nums=0
        function change() {
            nums++
            if (nums === 3) {nums = 0}
            document.getElementById("mao").src =img[nums]
        }
        setInterval("change()", 2000)
        function image(n) {
            document.getElementById("mao").src = img[n]}
    </script>
    <style type="text/css">
        ul{
            /*border:1px solid red;*/
            float: left;
            margin-top:5px;
            margin-left:100px;
        }
         ul li{
         float:left ;
         margin:0 20px;
         }
    <