-
joy灬
- 请问大佬有没有老师的所有源码文件
<!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>
- 2019-10-20 1回答·726浏览
-
qq_Justcomplete_04021004
- 跟着老师一起去敲的，但是内容不能显示成排
- 已采纳 qq_不二柚子_0 的回答
.notice-tit li{folat:left;}这拼错了 是 float:left;
- 2017-08-18 2回答·1497浏览
-
大千0
- 老师建议字体设置小点
font-size? 你代码啥样啊
- 2017-05-31 1回答·641浏览
-
qq_宝怪儿_0
- 为什么我的内容栏和标题栏重叠了？
是不是没设margin，或者border-bottom没有设成白色
- 2017-05-12 1回答·1043浏览
-
慕沐7231290
- 写的JavaScript不起做用
- 2016-11-16 2回答·800浏览
-
Hi_给我一个大甜筒
- aDiv[j].style.display="none";代码： Uncaught TypeError: Cannot read property 'style' of undefined
应该没错呀！
- 2016-10-13 1回答·679浏览
-
weibo_古月殊_0
- div 的显示
display：none之后，div不占空间，js控制的是移动到哪个li，显示对应的div
- 2016-06-05 1回答·799浏览
-
零下的夏天
- TAB选项卡
看轮播图教程吧
- 2016-05-23 1回答·785浏览
-
冰封de蚕
-
UFO2015
- 为什么提供的代码是一本书上的源码呢？
关于这一点讲一下我的观点，一是有一些精典案例代码，如这个代码他的最早的来源，是淘宝网站的源代码(旧版)，因为精典所以被很多教科书，及学校拿来做案例使用，所以看得时候不必关注它的出处，而是代码实现的思路。。。所以我的观点是：视频代码并不一定非得原创，只要代码规范并且有学习的地方，就可以拿出来和大家分享一下思路。
- 2015-10-03 3回答·860浏览
-
温暖_
- 为什么要写一个id还要写一个class，不能只写一个class么?
- 2015-07-09 4回答·1127浏览
-
完颜科子
- 我能小声说一下吗，源代码提供的不对.
- 2015-06-11 2回答·1035浏览
-
叶小白
- 照着的做怎么mod类的margin-left好像不起作用，依旧贴着浏览器边
添加个.notice-con .mod ul{padding: 8px 19px 19px;}
- 2015-05-26 2回答·1116浏览
-
渴望就是力量
- notice-tit的宽度？
- 已采纳 丿丫丫 的回答
写样式的时候最好自己研究 ，，按照别人想的样式。。自己会晕的。。
- 2015-04-06 2回答·748浏览
-
ChanceLi
- 讲得不错，还可以
- 2015-04-06 2回答·952浏览
-
不完美
- 老师操作太快了
我是来耍的
- 2015-03-11 1回答·867浏览
-
daniel8881
- 英文發音不正確
。。。。
- 2015-03-03 1回答·874浏览
-
Muse_ye
-
慕圣2746791
-
飞飞_0005
-
true3d
-
woaini7621796
-
淡抹
-
淡抹
-
澔哥
-
大壮是打不死的小强
-
菜菜猫
-
慕莱坞0491097
sublime text http://www.sublimetext.com/
- 2014-09-14 3回答·1072浏览
-
lol_0008
-
夏rain天
