-
leepulse
2021-05-08
- 关于计时器的一个问题
可以把大DIV（包含页签P和内容ul部分）放在鼠标移入事件内
- 1回答·483浏览
-
手可摘星_陈
2020-11-17
- 求解答~~~耐心等待
不知道
- 1回答·634浏览
-
SummerParis
2020-08-19
- 添加定时器
经测试运行ok，可以直接复制，有问题的话大家可以指出来交流一下。
- 1回答·677浏览
-
SummerParis
2020-08-19
- 直接就用遍历的i，不用再添加id索引
你这个是错误的，你的contents都没遍历，直接contents[i]
- 1回答·684浏览
-
初学小小白
2020-07-09
- 自己写的代码，供参考
<!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>
- 1回答·777浏览
-
一只小新
2020-05-14
- 做的稍微完善一点点。
不错 ，有想像
- 1回答·700浏览
-
慕码人5319942
2020-04-30
- 东西出不来
断点打一下试试
- 3回答·621浏览
-
慕慕1579095
2020-04-30
- 跳转问题怎么解决
是没有计算好个数
- 1回答·789浏览
-
慕粉7054916
2020-04-22
- 求救，怎么回事？
- 0回答·514浏览
-
慕久风采
2020-04-13
- 运行没有报错，但是没有切换效果,大神帮帮忙
已解决，是结构问题，不细心导致
- 1回答·596浏览
-
weixin_慕工程4183851
2020-03-24
- tagname提示为空
提示为空，说明你没有获取到正确的DOM元素，用console.log检查下。
window.onload=function(){
var menu = document.getElementById('menu');
var item = menu.getElementsByTagName('div');
for(var i = 0; i < item.length; i++) {
item[i].onclick = function() {
for(var i = 0; i < item.length; i++) {
item[i].children[1].style.display = 'none';
}
this.children[1].style.display = 'block';
}
}
- 1回答·754浏览
-
慕九州2297532
2020-02-29
- 运行时没有切换效果
window.onload=function(){window.onload 后面是一个等于
- 1回答·693浏览
-
qq_双眸_mvCPZ6
2019-10-30
- 为什么我给li赋值id加不上 急急急！！！
typeof id == 你写了3个等号
- 3回答·870浏览
-
qq_精慕门4154369
2019-10-24
- 为什么没有效果
- 0回答·461浏览
-
qq_精慕门4154369
2019-10-24
- 可以讲ul li换成p标签吗
用 ul li 比较规范一点，不建议使用p标签哦
- 1回答·988浏览
-
joy灬
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://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>
- 1回答·701浏览
-
慕慕0116261
2019-08-17
- 问：amy老师和一只帅蚂蚁讲的tab选项卡切换，哪个更适合新手入门
amy
- 1回答·657浏览
-
慕粉0924426887
2019-07-26
- 求救大佬们看看是哪里出错了？
var ps=$('menu-ll').getElementsByTagName('p');//获取p跟ul的下标 //错误
改成var ps = document.getElementsByTagName('p')
var uls=$('menu-hh').getElementsByTagName('ul'); //错误
改成var uls= document.getElementsByTagName('ul')
还有这一段
if(sy>=ps.length){//做一个判断以至于不会一直加下去
ps=0;
}
ps = 0 ///你想表达 sy = 0 ，大哥仔细点，都是很基础的，js代码不要放在html前面，
- 1回答·623浏览
-
慕虎0938118
2019-07-23
- 老师讲的很清晰，做题就像照葫芦画瓢
还要有自己的思维同学
- 1回答·841浏览
-
慕虎0938118
2019-07-23
- 跑起来了啊
恭喜你
- 1回答·736浏览
-
慕勒6779931
2019-07-23
- 交作业，不足之处，请大佬们指出。
<!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://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>
- 1回答·641浏览
-
慕勒6779931
2019-07-22
- 交作业。。
经验+1
- 1回答·646浏览
-
tigerchn
2019-07-13
- 完美测试成功
是要有这样的好习惯
- 1回答·822浏览
-
qq_年少无知_5
2019-06-09
- 怎么在选项卡下面添加一个新的div呢，添加不了呀
style="display: none"
其实添加成功了，但是你把他隐藏了。
- 1回答·815浏览
-
慕仰6027081
2019-05-30
- 为什么这样写，鼠标点到选项上的时候不停了，还是继续切换下去，而且切换速度变快了
很简单，在你的onmouseout中重新定义了定时器。把定时器var timer改成 timer即可
- 1回答·862浏览
-
qq_慕粉7082047
2019-05-27
- 为什么报错出现这个。
应该是js这个脚本的引用出现问题
- 1回答·872浏览
-
小阳2019
2019-04-27
- tab内容
贴一下全部的代码
- 1回答·779浏览
-
qq_慕田峪3304025
2019-04-20
- 为什么不显示？
- 2回答·778浏览
-
luciamiracle
2019-04-02
- 关于window.onload = tab的问题，求助各位大神，望回答，谢谢
这么说吧，不加括号，等号后面代表的是这个函数体，而加了括号，代表的就是函数执行的结果了。
- 1回答·960浏览
-
sayHi被注册
2019-04-01
- 代码在自己的编辑器上跑起来了
在设置定时器之前，要先清除准备执行的定时器
- 1回答·962浏览
