html，幻灯片自动切换代码_html幻灯片代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33845254/article/details/79554671

本文介绍了一个基于HTML和JavaScript实现的图片轮播效果，包括自动播放、手动选择图片和淡入淡出的过渡效果。通过简单的HTML结构和JavaScript代码，展示了如何创建一个实用的图片展示组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title></title> 
        <style> 
            body,div,ul,li{margin:0;padding:0;}
            ul{list-style-type:none;}
            body{background:#000;text-align:center;font:12px/20px Arial;}
            #box{position:relative;width:322px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}
            #box .list{position:relative;width:320px;height:240px;overflow:hidden;border:1px solid #ccc;}
            #box .list li{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
            #box .list li.current{opacity:1;filter:alpha(opacity=100);}
            #box .count{position:absolute;right:0;bottom:5px;}
            #box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
            #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
            #tmp{width:100px;height:100px;background:red;position:absolute;}
        </style> 
        <script type="text/javascript"> 
        window.onload = function() {
            var oBox = document.getElementById("box");
            var aUl = document.getElementsByTagName("ul");
            var aImg = aUl[0].getElementsByTagName("li");
            var aNum = aUl[1].getElementsByTagName("li");
            var timer = play = null;
            var i = index = 0;
            var bOrder = true;
            //切换按钮
            for (i = 0; i < aNum.length; i++) {
                aNum[i].index = i;
                aNum[i].onmouseover = function() {
                    show(this.index)
                }
            }
            //鼠标划过关闭定时器
            oBox.onmouseover = function() {
                clearInterval(play)
            };
            //鼠标离开启动自动播放
            oBox.onmouseout = function() {
                autoPlay()
            };
            //自动播放函数
            function autoPlay() {
                play = setInterval(function() {
                    //判断播放顺序
                    bOrder ? index++:index--;
                    //正序
                    index >= aImg.length && (index = aImg.length - 2, bOrder = false);
                    //倒序
                    index <= 0 && (index = 0, bOrder = true);
                    //调用函数
                    show(index)
                },
                2000);
            }
            autoPlay(); //应用
            function show(a) {
                index = a;
                var alpha = 0;
                for (i = 0; i < aNum.length; i++) aNum[i].className = "";
                aNum[index].className = "current";
                clearInterval(timer);
                for (i = 0; i < aImg.length; i++) {
                    aImg[i].style.opacity = 0;
                    aImg[i].style.filter = "alpha(opacity=0)";
                }
                timer = setInterval(function() {
                    alpha += 2;
                    alpha > 100 && (alpha = 100);
                    aImg[index].style.opacity = alpha / 100;
                    aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
                    alpha == 100 && clearInterval(timer)
                },
                20);
            }
        };
    </script> 
 </head> 
 <body> 
  <div id="box"> 
   <ul class="list"> 
    <li class="current"><img src="/images/m06.jpg" width="320" height="240" /></li> 
    <li><img src="./img/1.jpg" width="320" height="240" /></li> 
    <li><img src="./img/2.jpg" width="320" height="240" /></li> 
    <li><img src="./img/3.jpg" width="320" height="240" /></li> 
    <li><img src="./img/1.jpg" width="320" height="240" /></li> 
   </ul> 
   <ul class="count"> 
    <li class="current">1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
   </ul> 
  </div>  
 </body>
</html>