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

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

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

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

<head>

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

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

</nav>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</section>

$(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>

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

浏览 1282回答 2

2回答

随时随地看视频慕课网APP