使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果

原创已于 2025-06-09 14:19:30 修改 · 1.1w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#jquery轮播 #js #accp

于 2018-12-19 12:25:28 首次发布

本文介绍了一个使用HTML、CSS和jQuery实现的广告图片轮播切换功能，包括左右按钮控制、图片切换效果、鼠标悬停暂停及恢复定时滚动等功能。

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

轮播应有的功能大致都有，分享给一些在学的朋友参考学习。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script type="text/javascript">
  $(function () {
    //记录当前位置
    var index = 0;
    //显示左右侧按钮
    $(".adver").hover(function () {
      $(".arrowLeft,.arrowRight").toggle();
    })
    //左侧按钮
    $(".arrowLeft").click(function () {
      index--;
      if (index < 0) {
        index = 5;
      }
      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
    });
    //右侧按钮
    $(".arrowRight").click(function () {
      index++;
      if(index > 5) {
        index = 0;
      }
      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
    });
    //切换图片
    $("ul li").hover(function () {
      index = $(this).index();
      $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
      $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
    });
    //定时滚动
    var runId = "";
    function run() {
      runId = setInterval(function(){
        index++;
        if(index > 5) {
          index = 0;
        }
        $(".adver").css("background","url(images/adver0" + (index+1) + ".jpg)");
        $("ul li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","black");
      },1000);
    }
    run();
    //移入暂停和移出恢复定时滚动
    $(".adver").mousemove(function () {
      clearInterval(runId);
    }).mouseout(function () {
      run();
    })
  })
</script>
</body>
</html>