简单的HTML+js图片轮播?

发布网友发布时间：2022-04-21 04:56

共3个回答

热心网友时间：2022-04-07 06:40

h5代码：

css代码：

hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}#wrap:hover #list{-webkit-animation-play-state:paused;}</style>

扩展资料：

轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。

参考资料来源：

百度百科-轮播

热心网友时间：2022-04-07 07:58

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        #tab {
    overflow: hidden;
    width: 400px;
    height: 250px;
    position: relative;
    float: left;
}

#tab>img:not(:first-child) {
    display: none;
}
    </style>
    <script>
        var interval;
        var pos = 0;
        window.onload = function() {
            var images = document.getElementsByTagName('img');
            var tab = document.getElementById("tab");
            tab.onmouseover = function() {
                clearInterval(interval);
            }
            tab.onmouseout = function() {
                run(images);
            }
            run(images);
        }
        var run = function(images) {
            interval = setInterval(function() {
                images[pos].style.display = 'none';
                pos = ++pos == images.length ? 0 : pos;
                images[pos].style.display = 'inline';
            }, 1000);
        }
    </script>
</head>

<body>
    <div id="tab">
        <img src="img/01.jpg" width="400" height="250" />
        <img src="img/02.jpg" width="400" height="250" />
        <img src="img/03.jpg" width="400" height="250" />
    </div>
</body>

</html>

热心网友时间：2022-04-07 09:32

var is_over = 0;

window.onload = function(){
var images = document.getElementsByTagName('img');
var tab = document.getElementsById('tab');

tab.onmouseover = function(){

is_over = 1;

}

tab.onmouseout = function(){

is_over = 0;

}

var pos = 0;
var len = images.length;
setInterval(function(){

if( !is_over){

images[pos].style.display = 'none';
pos = ++pos == len ? 0 : pos;
images[pos].style.display = 'inline';

}

},1000);
};

追问我将代码替换掉结果无法播放图片了呢

全部栏目

简单的HTML+js图片轮播?