html页面实现图片滚动

最新推荐文章于 2025-04-20 16:47:23 发布

Drown_F

最新推荐文章于 2025-04-20 16:47:23 发布

阅读量2.4w

点赞数 28

本文链接：https://blog.youkuaiyun.com/qq_44124672/article/details/111133350

版权

html页面实现图片滚动

css代码

 * {
            margin: 0px;/*设置一个元素所有外边距的宽度*/
            padding: 0px;/*设置元素所有内边距的宽度*/
            text-align: center;/*规定元素中的文本的水平对齐方式。*/
        }
        #banner {
            width: 62.5%;
            height: 50%;
            margin: 50px auto;
            position: relative; /*相对定位,相对于.btn按钮*/
            text-align: left;
        }
        .pic image {
            display: block; /*默认有图片不显示*/
            width: 50%;
            height: 50%;
            position: relative; /*相对定位.对应的是.pic这个div*/
            top: 0px;
            left: 0px;
        }
        .pic a {
            display: none;

        }
        .pic { /*专门显现图片区*/
            position: relative; /*相对定位.对应.pic img*/
            border: 1px solid red;
        }
        .btn {
            width: 50%;
            height: 5%;
            position: absolute; /*绝对定位相对于banner div*/
            bottom: 5px;
            right: 5px;
        }
        .btn ul li {
            background-color: #000000; /*黑色*/
            color: #ffffff;
            list-style-type: none;
            width: 18px;
            height: 18px;
            float: left;
            border-radius: 9px; /*变成圆的*/
            text-align: center;
            line-height: 18px;
            cursor: pointer; /*鼠标移动变手指状态*/
            margin-left: 5px;
        }
        .btn ul li.one {
            background-color: #ff9966;
        }

JavaScript代码载入jquery

<script type="text/jscript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/jscript">
$(function () {
$("#all li").mouseover(function () {//鼠标进入离开事件
$(this).css("background-color", "#ff00ff").siblings().css("background-color", "white");
$(this).css({ "background-color": "red", "font-size": "9px" }).siblings().hide();
});
$(window).scroll(function () {//鼠标滚动事件
var _top = $(window).scrollTop(); //获得鼠标滚动的距离
          });
          //手动播放图片
          $(".btn ul li").hover(function () {
              $(this).addClass("one").siblings().removeClass("one");
              index = $(this).index();
              i = index;
              $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
          });
          //自动播放图片
          var i = 0;
          var t = setInterval(autoplay, 3000);
          function autoplay() {
              i++;
              if (i > 4) i = 0;
              $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
              $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
          }
          $("#banner").hover(function () {
              clearInterval(t);
          }, function () {
              t = setInterval(autoplay, 3000);
          });
      });
    </script>

body部分

<body>
<div id="head">
    <a href="login2.jsp">登录</a>
    <a href="register2.jsp">注册</a>
    <a href="main.html">首页</a>
    </div>
<div id="banner">
    <div class="pic">
        <a href="#" style="display:block"><img alt="" src="images/1.jpg" /></a>
        <a href="#"><img alt="" src="images/2.jpg" /></a>
        <a href="#"><img alt="" src="images/3.jpg" /></a>
        <a href="#"><img alt="" src="images/4.jpg" /></a>
        <a href="#"><img alt="" src="images/5.jpg" /></a>
    </div>
    <div class="btn">
        <ul>
            <li class="one">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
</body>

页面图片
在这里插入图片描述