正在回答 回答被采纳积分+1
4回答
樱桃小胖子
2017-09-30 14:18:36
// 假如你想要实现当鼠标放在tab菜单上，图片停止轮播，当鼠标放在单个的tab上图片切换。鼠标放在图片上是。图片不停止，继续轮播的效果，直接将下列的main改成menu即可。即代码如下：
function slideImg() {
// var main = byId("main");
menu.onmouseover = function() {
//滑过清除定时器
if (timer)
clearInterval(timer);
}
menu.onmouseout = function() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
changeImg(index);
}, 1000)
}
//自动触发
menu.onmouseout();
}另外，建议：
<!--选项卡导航--> <div class="menu" id="menu"> <!-- <div class="menu-item"><span>首页</span></div> --> <!-- 这里要设置默认选中的第一项active，否则默认打开第一个选项卡没有选中效果 --> <div class="menu-item active"><span>首页</span></div> <div class="menu-item"><span>点击看看</span></div> <div class="menu-item"><span>会自动的</span></div> <div class="menu-item"><span>我的网站</span></div> </div>
希望可以帮到你~
慕瓜9363615
2017-09-30 12:01:33
<style>
.main{
width:1200px;
height:500px;
margin:30px auto;
overflow:hidden;
}
.menu{
width:1198px;
height:70px;
border:1px solid #ccc;
border-bottom:none;
border-radius:10px 10px 0 0;
cursor:pointer;
}
.menu-item{
float:left;
height:70px;
width:299.5px;
font-size:22px;
text-align:center;
line-height:70px;
}
.active{
background:#FFCC00;
border-radius:10px 10px 0 0;
}
*{
margin:0;
padding:0;
}
body{
font-family:"Microsoft YaHei";
}
.banner{
width:1200px;
height:430px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:430px;
background-repeat:no-repeat;
position:absolute;
display:none;
}
.slide1{
background-image:url("./1.jpg");
}
.slide2{
background-image:url("./3.jpg");
}
.slide3{
background-image:url("./4.jpg");
}
.slide4{
background-image:url("./5.jpg");
}
.slide-active{
display:block;
}
</style>
</head>
<body>
<div class="main" id="main">
<!--选项卡导航-->
<div class="menu" id="menu">
<div class="menu-item"><span>首页</span></div>
<div class="menu-item"><span>点击看看</span></div>
<div class="menu-item"><span>会自动的</span></div>
<div class="menu-item"><span>我的网站</span></div>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
</div>
</div>
<script>
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var index=0,
timer=null,
pics=byId("banner").getElementsByTagName("div")
len=pics.length,
menu=byId("menu"),
menuItems=menu.getElementsByClassName("menu-item");
function slideImg(){
var main=byId("main");
main.onmouseover=function(){
//滑过清除定时器
if(timer)
clearInterval(timer);
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg(index);
},1000)
}
//自动触发
main.onmouseout();
}
for(var m=0;m<menuItems.length;m++){
menuItems[m].id=m;
menuItems[m].onmouseover=function(){
index=this.id;
changeImg();
}
}
//切换图片
function changeImg(){
//遍历所有div并且隐藏
for(var i=0;i<len;i++){
pics[i].style.display="none";
menuItems[i].className="menu-item";
}
//根据索引显示图片
pics[index].style.display="block";
menuItems[index].className="menu-item active";
}
slideImg();
</script>
</body>
</html>有点多
JavaScript基础入门 2018
- 参与学习 547 人
- 提交作业 206 份
- 解答问题 640 个
JavaScript作为前端学习中的一个重要组成部分，本课程将带领你从最基础的语法开始，学习js的流程控制语句、函数、内置对象、DOM基础、DOM事件、BOM基础以及经典的js案例--轮播图。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星