猿问
下载APP

怎么可以实现tab选项卡加上图片自动滑动?

只有第一个选项卡可以图片自动滑动,可是其他的不行,哪里有问题?怎么实现鼠标点到哪个选项卡,对应的图片就自动滑动。或者能够第一个选项卡的图片展示完后,自动跳到下一个选项卡呢?

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>学习练手写下个简易的滑动门</title>

<script src="js/jquery.min.js"></script>

<style>

*{box-sizing:border-box;}

#nav{height:50px;}

#nav a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;text-align:center;font-family: 'Microsoft YaHei';float:left;background- color:#e1e1e1;cursor:pointer;}

#nav a.on{border-bottom:2px solid #e60012;}

#contentBox{width:880px;height:100px;}

#contentBox .box{text-align:center;line-height:100px;font-size:24px;font-weight:blod;display:none;}

#contentBox .box.active{display:block;}

#div1{

width: 712px;

height: 108px;

margin: 100px auto;

position: relative;

overflow: hidden;

 

}

#div1 ul{

position:absolute;

left: 0;

top: 0;

}

#div1 ul li{

float: left;

width: 178px;

height: 108px;

list-style: none;

margin-left: 10px;

}

</style>

</head>

<body>

<section>

   <nav id="nav">

     <a class="on">tab1</a>

     <a>tab2</a>

     <a>tab3</a>

     <a>tab4</a>

   </nav>

   <div id="contentBox">

     <div class="box active">

<div id="div1">

<ul>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

</ul>

</div>

   </div>

     <div class="box">

<div id="div1">

<ul>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

</ul>

</div>

</div>

     <div class="box">

<div id="div1">

<ul>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

</ul>

</div>

</div>

     <div class="box">

<div id="div1">

<ul>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

</ul>

</div>

</div>

   </div>

</section>

 <script>

     $(function(){

    $("#nav a").off("click").on("click",function(){

       var index = $(this).index();

       $(this).addClass("on").siblings().removeClass("on");

       $("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active");

     });

  });

</script>

<script>

window.onload=function(){

var oDiv  =  document.getElementById('div1');

var oUl = document.getElementsByTagName('ul')[0];

var Li = oUl.getElementsByTagName('li');//获取ul下的所有li

oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加

oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度

var speed = 2

//主方法

function move(){

//如果左边横向滚动了长度一半之后,回到初始位置

if(oUl.offsetLeft<-oUl.offsetWidth/speed){

oUl.style.left = '0'

}

//如果右边横向滚动的距离大于0 就让他的位置回到一半

if(oUl.offsetLeft>0){

oUl.style.left = -oUl.offsetWidth/speed+'px'; 

}

//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动

oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动

}

//调用方法

var timer = setInterval(move,30)

//鼠标指向的时候 暂停

oDiv.onmouseover=function(){

clearInterval(timer);

}

//鼠标离开之后 继续滚动

oDiv.onmouseout=function(){

timer = setInterval(move,30)

}

}

</script>


</body>

</html>


慕粉1002408426
浏览 475回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答