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

最新推荐文章于 2021-05-12 10:23:48 发布

搭戏

最新推荐文章于 2021-05-12 10:23:48 发布

阅读量1.1w

点赞数 17

文章标签： jquery轮播 js accp

本文链接：https://blog.csdn.net/qq_42460605/article/details/85093514

版权

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

<!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>