css示例学习----图片轮播

最新推荐文章于 2024-04-16 17:02:57 发布

ccd756601501

最新推荐文章于 2024-04-16 17:02:57 发布

阅读量393

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ccd756601501/article/details/54025093

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在网站中我们经常可以看到图片轮播的效果，下面的示例展示了这种效果。

<!DOCTYPE html>
<html>
  <head>
    <title>轮播</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
  </head>
  <style>
    .ad{
      border: 1px solid #ddd;
      /* 与图片大小一致 */
      width: 480px;
      height: 360px;
      margin: 0;
      padding: 0;
    }
    .ad li{
      list-style-type: none;
      width: 480px;
      height: 360px;
      padding: 0;
      margin: 0;
    }
    .show{/* 显示 */
      display: block;
    }
    .hide{/* 隐藏 */
      display: none;
    }
  </style>
  <script>
    /* 利用定时器，定时关闭显示图片 */
    var timer;
    var index = 0;//下一个图片的序号
    function start(){
      if(!timer){
        timer = setInterval(function(){
          //找到全部的 li 全部设置为hide
          //找到下一个？设置 show
          var ul = document
            .getElementById("ad");
          //找到ul中的全部li子元素
          var li = 
            ul.getElementsByTagName("li");
          for(var i=0; i<li.length; i++){
            li[i].className="hide";
          }
          index++;
          li[index%li.length]
            .className="show";
        }, 1000);
      }
    }
    function stop(){
      if(timer){
        clearInterval(timer);
        timer = null;
      }
    }
  </script>
  <!-- onload 在页面加载完毕以后执行 -->
  <body οnlοad="start();">
    <h1>轮播</h1>
    <!-- onmouseover 事件在鼠标出现元素上的时候执行，onmouseout鼠标离开时候执行 -->
    <ul id="ad" class="ad" 
      οnmοuseοver="stop();" οnmοuseοut="start();">
      <li class="show"><a src="#"><img src="images/apple.jpg"></a></li>
      <li class="hide"><a src="#"><img src="images/daffodil.jpg"></a></li>
      <li class="hide"><a src="#"><img src="images/daisy.jpg"></a></li>
      <li class="hide"><a src="#"><img src="images/rose.jpg"></a></li>
    </ul>
  </body>
</html>

这样我们就可以看出图片轮播的效果。

ccd756601501

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css示例学习----图片轮播

在网站中我们经常可以看到图片轮播的效果，下面的示例展示了这种效果。轮播 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> .ad{ border: 1px solid #ddd; /* 与图片大小一致 */ widt
复制链接

扫一扫