js 选项卡轮播图

最新推荐文章于 2022-02-21 20:05:19 发布

三尺秋水一点飞鸿

最新推荐文章于 2022-02-21 20:05:19 发布

阅读量877

点赞数

分类专栏： js 笔记

本文链接：https://blog.csdn.net/qq_42467563/article/details/83315953

版权

练习同时被 3 个专栏收录

201 篇文章 8 订阅

订阅专栏

笔记

185 篇文章 0 订阅

订阅专栏

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
       * {
               margin: 0;
               padding: 0;
           }
           .box {
               margin: 100px auto;
               width: 600px;
               height: 400px;
               background: red;
               text-align: center
           }
           button {
               width: 60px;
               height:30px;
           }
           input {
               width: 100px;
               height: 40px;
               font-size: 25px;
               color:green;
           }
           .box div {
               width: 100%;
               height: 400px;
               background: yellow;
               font-size: 30px;
               display: none;
           }
           .box .show {
               display: block;
           }
           .box .active {
               background: orange;
               width: 120px;
           }


       </style>
   </head>
   <body>
   <div class='box'>
   <button class="prev"><<</button>
   <input type="button" value="李白" class="active"/>
   <input type="button" value="杜甫" />
   <input type="button" value="苏轼" />
   <input type="button" value="白居易" />
   <button class="next">>></button>
   <div class="show">
           凤凰台上凤凰游，
           凤去台空江自流。
           吴宫花草埋幽径，
           晋代衣冠成古丘。
           三山半落青天外，
           二水中分白鹭洲。
           总为浮云能蔽日，
           长安不见使人愁。
</div>
   <div>
   国破山河在，城春草木深。
感时花溅泪，恨别鸟惊心。
烽火连三月，家书抵万金。
白头搔更短，浑欲不胜簪。

   </div>
   <div>
           水光潋滟晴方好，
           山色空蒙雨亦奇。
           欲把西湖比西子，
           淡妆浓抹总相宜。

   </div>
   <div>
           白浪茫茫与海连，
           平沙浩浩四无边。
           暮去朝来淘不住，
           遂令东海变桑田。

   </div>

   </div>

   </body>
   <script>
   var box = document.getElementsByClassName('box')[0]
   var prev = document.getElementsByClassName('prev')[0]
   var next = document.getElementsByClassName('next')[0]
   var aInput = document.getElementsByTagName('input')
   var aDiv = box.getElementsByTagName('div')
   var selectIndex = 0
   var count = aInput.length
   for (var i=0; i<count; i++) {
           aInput[i].index = i
           aInput[i].onclick = function () {
               refresh(this.index)
           }
       }

       var timer = setInterval(nextOption, 2000)

       box.onmouseover = function () {
           clearInterval(timer)
           timer = null
       }

       box.onmouseout = function () {
           timer = setInterval(nextOption, 2000)
       }

       prev.onclick = prevOption
       next.onclick = nextOption


       function prevOption()
       {
           var index = selectIndex - 1
           if (index == -1) {
               index = count - 1
           }
           refresh(index)
       }

       function nextOption()
       {
           var index = selectIndex + 1
           if (index == count) {
               index = 0
           }
           refresh(index)
       }

       function refresh(index)
       {
           if (index != selectIndex) {
               // 刷新内容
               // 清空所有显示
               for (var i=0; i<count; i++) {
                   aInput[i].className = ''
                   aDiv[i].className = ''
               }
               // 添加当前选中项
               aInput[index].className = 'active'
               aDiv[index].className = 'show'

               // 记录当前位置
               selectIndex = index
           }
       }