自己写的代码，供参考-慕课网

首页课程实战体系课手记专栏慕课教程

自己写的代码，供参考

来源：4-1 焦点轮播图效果

初学小小白

2020-07-09 10:38

<!doctype html>

<html>

<head>

<title>Document</title>

<style>

*{margin:0;

padding:0;

list-style:none;}

.wrap{height:170px;

width:490px;

margin:60px auto;

overflow: hidden;

position: relative;

margin:100px auto;}

.wrap ul{position:absolute;}

.wrap ul li{height:170px;}

.wrap ol{position:absolute;

right:5px;

bottom:10px;}

.wrap ol li{height:20px; width: 20px;

background:#ccc;

border:solid 1px #666;

margin-left:5px;

color:#000;

float:left;

line-height:center;

text-align:center;

cursor:pointer;}

.wrap ol .on{background:#E97305;

color:#fff;}

</style>

window.onload=function(){

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic'),

imgs=pic.getElementsByTagName('li'),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;

if(imgs.length !== list.length) return;

for(var i=0;i<list.length;i++){

list[i].id=i;

list[i].onmouseover=function(){

chang(this.id);

}

function auto(){

timer=setInterval(function(){

index++;

if(index>=list.length){

index=0;

}

chang(index);

},2000);

}

auto();

function chang(curindex){

for(var j=0;j<list.length;j++){

list[j].className='';

imgs[j].style.display='none';

}

list[curindex].className='on';

imgs[curindex].style.display='block';

index = curindex;

}

wrap.onmouseover=function(){

clearInterval(timer);

timer=null;

}

wrap.onmouseout=function(){

auto();

}

</script>

</head>

<body>

</ul>

</ol>

</div>

</body>

</html>

写回答关注

1回答

qq_云上_0

2020-10-14 10:32:38

<!doctype html>
<html lang="en">

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

    .wrap {
      height: 170px;
      width: 490px;
      margin: 60px auto;
      overflow: hidden;
      position: relative;
      margin: 100px auto;
    }

    .wrap ul {
      position: absolute;
    }

    .wrap ul li {
      height: 170px;
    }

    .wrap ol {
      position: absolute;
      right: 5px;
      bottom: 10px;
    }

    .wrap ol li {
      height: 20px;
      width: 20px;
      background: #ccc;
      border: solid 1px #666;
      margin-left: 5px;
      color: #000;
      float: left;
      line-height: center;
      text-align: center;
      cursor: pointer;
    }

    .wrap ol .on {
      background: #E97305;
      color: #fff;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var wrap = document.getElementById('wrap'),
        pic = document.getElementById('pic'),
        list = document.getElementById('list').getElementsByTagName('li'),
        index = 0,
        timer = null;
      //自动播放li
        timer = setInterval(autoPlay, 1000);

      //封装自动切换函数
      function autoPlay() {
        index++;
        if (index >= list.length) {
          index = 0;
        }
        picChange(index);
      }
      //封装切换图片函数
      function picChange(curindex) {
        for (i = 0; i < list.length; i++) {
          list[i].className = '';
        }
        //li自动高亮
        list[curindex].className = 'on';
        pic.style.top = -(curindex * 170) + "px";
      }
      //封装定时器函数
      function intimer() {
        timer = setInterval(function () {
          index++;

          if (index >= list.length) {
            index = 0;
          }
          //将其他的li高亮清除
          for (i = 0; i < list.length; i++) {
            list[i].className = '';
          }
          //li自动高亮
          list[index].className = 'on';
          pic.style.top = -(index * 170) + "px";
        }, 1000)
      }
      //鼠标滑过和离开状态
      for (let j = 0; j < list.length; j++) {
        pic.onmouseover = function () {
          clearInterval(timer);

        }
        index = j;
        pic.onmouseout = function () {
          console.log(index)
          intimer();
        }

      }

    }
  </script>
</head>

<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>

</html>

0 0

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65469 学习 · 533 问题

查看课程

相似问题

自己写的先撸为敬

回答 2

回答 1

回答 3

回答 2

回答 1