为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/Tab选项卡切换效果

交作业，不足之处，请大佬们指出。

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

<title>轮播图切换</title>

<style>

  *{

margin:0;

    padding:0;

    list-style:none;

}

  .tit{

height:170px;

        width:490px;

/* border: 1px saddlebrown solid; */

        overflow: hidden;

        position: relative;

        margin:200px auto;

}

  .tit ul{

position:absolute;

top: 0;

left: 0;

} 

  .tit ul li{

/* height:170px; */

/* width: 490px; */

visibility: inherit;

}

  .tit ol{

   position:absolute;

           right:5px;

           bottom:10px;

   }

   

  .tit 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;}

  

  .tit ol .on{background:#E97305;

               color:#fff;}


  </style>

  <script type="text/javascript">

  //封装ID函数

  function getId(id){

  return typeof  id==="string"?document.getElementById(id):id;

  }

 

  

  window.onload=function(){

    var wrap=getId("tit");

    var image_list=getId("pic").getElementsByTagName("li");

    var tag_list=getId("list").getElementsByTagName('li');

    var index=0;

    var timer=null;


if(image_list.length!=tag_list.length){

return;

}




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

tag_list[i].id=i;

// tag_list[i].onclick=a_onclick;//点击

// tag_list[i].onmouseover=a_onclick;//鼠标经过

tag_list[i].onmouseover=function(){

if(timer){

clearInterval(timer);

timer=null;

}

for(var t=0;t<tag_list.length;t++){

tag_list[t].className="";

image_list[t].style.display="none";

}

this.className="on";

image_list[this.id].style.display="block";

index=this.id;//替换鼠标移动后index的值

}


tag_list[i].onmouseout=function(){

// start_time();

timer=setInterval(function(){

index++;

if(index>=tag_list.length){

index=0;

}

for(var k=0;k<tag_list.length;k++){

tag_list[k].className="";

image_list[k].style.display="none";

}

tag_list[index].className="on";

image_list[index].style.display="block";

},2000);

}

}


//封装点击切换函数

function a_onclick(){

var that=this;

// lay_time();

// reset();


function reset(){

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

tag_list[j].className="";

image_list[j].style.display="none";

}

this.className="on";

image_list[this.id].style.display="block";

}



function lay_time(){//封装延时切换函数

if(timer){//清除定时器

clearTimeout(timer);

timer=null;

}


timer=setTimeout(function(){//延时切换

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

tag_list[j].className="";

image_list[j].style.display="none";

}

that.className="on";

image_list[that.id].style.display="block";

},1000);

}


}

function start_time(){//封装自动切换函数

timer=setInterval(function(){

index++;

if(index>=tag_list.length){

index=0;

}

for(var k=0;k<tag_list.length;k++){

tag_list[k].className="";

image_list[k].style.display="none";

}

tag_list[index].className="on";

image_list[index].style.display="block";

},2000);

}


start_time();


   }


  </script>

</head>

<body>

  <div class="tit" id="titid">

  <div class="image-box">

<ul id="pic">

  <li><img src="../img/image01.jpg" style="display: block" alt=""></li>

  <li><img src="../img/image02.jpg" alt=""></li>

  <li><img src="../img/image03.jpg" alt=""></li>

  <li><img src="../img/image04.jpg" alt=""></li>

  <li><img src="../img/image05.jpg" alt=""></li>    

</ul>

  </div>

  <div class="tag-box">

<ol id="list">

  <li class="on">1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ol>

  </div>



  </div>

</body>

</html>


慕勒6779931

2019-07-23

源自：Tab选项卡切换效果  4-1

关注问题 我要回答
649
操作
收起

正在回答

1 回答

幕布斯1429361
2019-10-20

<!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;  transition: all 1s;

    -webkit-transition: all 1s; /* Safari */ } 

  .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;


      // 定义并调用自动播放函数

      function autoplay(){

        index++;

          if(index == list.length){

            index = 0;

          }

          autoImg()

      }

      timer = setInterval(function(){  autoplay() },3000)


      // 定义图片切换函数

     function autoImg(){

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

              list[i].className = "";

          }

          list[index].className = "on";

          pic.style.marginTop = index*-170+"px";

     }

     // 鼠标划过整个容器时停止自动播放

     wrap.onmouseover = function(){/*鼠标引入，清除定时器，轮播图停止*/

        clearInterval(timer);

    };

     // 鼠标离开整个容器时继续播放至下一张

     wrap.onmouseout = function(){/*鼠标移出，重新调用定时器，轮播图开始*/

      timer = setInterval(function(){  autoplay() },3000)

    };

     // 遍历所有数字导航实现划过切换至对应的图片

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

      list[i].index = i;

      list[i].onmousemove = function(){

        index = this.index ;// 重置索引值

        // alert(this.index)

        autoImg()

      }

     }

   }


  </script> 

</head>

<body>

  <div class="wrap" id='wrap'>

    <ul id="pic">

      <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>

      <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>

      <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>

      <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>

      <li><img src="http://img1.sycdn.imooc.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/150
提交
取消
Tab选项卡切换效果
  • 参与学习       65467    人
  • 解答问题       533    个

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

进入课程

本课相似问答

1 回答交作业。。

2 回答交作业

1 回答求救大佬们看看是哪里出错了？

1 回答真是找不出问题在哪，请大神指点！

2 回答作业作业~
搜索更多本课相关问答

交作业，不足之处，请大佬们指出。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信