js 罗云熙轮播图

最新推荐文章于 2019-01-26 10:04:16 发布

三尺秋水一点飞鸿

最新推荐文章于 2019-01-26 10:04:16 发布

阅读量321

点赞数

分类专栏： js

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

版权

练习同时被 2 个专栏收录

201 篇文章 8 订阅

订阅专栏

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .box {
               margin: 100px auto;
               width: 690px;
               height: 400px;
               background: white;
               text-align: center
           }

           button {
               width: 60px;
               height: 30px;
           }

           input {
               width: 60px;
               height: 30px;

               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>

           </div>
           <div>
               <img src="3.JPG" />
           </div>
           <div>
               <img src="4.jpg" />

</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
           }
       }
   </script>

</html>

有空慢慢改o(╥﹏╥)o

三尺秋水一点飞鸿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 罗云熙轮播图

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0;
复制链接

扫一扫