HTML轮播图

最新推荐文章于 2023-03-25 10:47:11 发布

weixin_44282540

最新推荐文章于 2023-03-25 10:47:11 发布

阅读量384

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44282540/article/details/116407365

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一：简单的轮播图

直接编辑src中的图片位置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图测试</title>
    <script type="text/javascript">
        var  ps =new Array("img/f1.jpg","img/f2.jpg","img/f3.jpg","img/f4.jpg")
        var i =0;
        function changetu(){
            i++ ;
            if (i>=ps.length){
                i=0;
            }
            document.getElementById("tu").src=ps[i];
        }
        setInterval(changetu,1000) ;

    </script>
</head>
<body>
<div>
    <img id="tu" height="280px"  width="520px" src="img/f1.jpg" >
</div>
</body>
</html>

二：可以点击图片中的url

document.getElementsByClassName().style.display  使用这种隐藏的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 280px;
            width: 520px;
            border: 1px solid black;     /*线框1px 实线 黑色*/
            margin: 100px  auto;
        }
        /*取出所有的内边距和外边距*/
        *{
            margin: 0px;
            padding: 0px;
        }
        /*class="img-slide img" 里面的img*/
        .img {
            height: 280px;
            width: 520px;
            margin: 0 auto;
            display: none;
        }
    </style>

</head>
<body>


<div class="imgbox" id="box" >
    <a href="https://www.baidu.com/" >
        <img src="img/f1.jpg" class="img-slide img" >
    </a>
    <a href="https://www.163.com/" >
        <img src="img/f2.jpg" class="img-slide img"  >
    </a>
    <a href="https://www.qq.com/" >
        <img src="img/f3.jpg" class="img-slide img" >
    </a>
    <a href="https://xueshu.baidu.com/" >
        <img src="img/f4.jpg" class="img-slide img">
    </a>
</div>

</body>

<script type="text/javascript">
    window.onload=function (){
    // index：索引， len：长度
    var index = 0, len;
    var imgbox =document.getElementsByClassName("img-slide");
    len =imgbox.length ;
    imgbox[index].style.display ='block' ;
    function  changeImg(){
        index ++;
        if (index >= len)  index = 0 ;
        for (var i=0;i<len;i++){
            imgbox[i].style.display= 'none';
        }
        imgbox[index].style.display= 'block' ;
    }
    setInterval(changeImg,1000) ;
    }
</script>

</html>

三：鼠标放上去停止轮询，移开继续轮询图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图测试</title>
    <style>
        #box{
            height: 280px;
            width: 520px;
            border: 1px solid black;     /*线框1px 实线 黑色*/
            margin: 50px  auto;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="tu" height="280px"  width="520px" src="img/f1.jpg" >
</div>
</body>
<script type="text/javascript">
    var myBox = document.getElementById("box")
    var  ps =new Array("img/f1.jpg","img/f2.jpg","img/f3.jpg","img/f4.jpg")
    var i =0;
    function changetu(){
        i++ ;
        if (i>=ps.length){
            i=0;
        }
        document.getElementById("tu").src=ps[i];
    }
     var timeout =setInterval(changetu,1000) ;

    // 鼠标放上去停止轮询
    myBox.onmouseover=function () {
        clearInterval(timeout)
    }
    // 移开鼠标继续轮询
    myBox.onmouseout=function () {
        timeout =setInterval(changetu,1000) ;
    }

</script>
</html>

weixin_44282540

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML轮播图

一：简单的轮播图直接编辑src中的图片位置：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>轮播图测试</title> <script type="text/javascript"> var ps =new Array("img/f1.jpg","img/f2.jpg","img/f3.jpg","im
复制链接

扫一扫