您的位置：首页 > Web前端 > JavaScript

js定时器的练习（一）淘宝广告效果

2017-08-03 20:08 190 查看

这几天在学习定时器，写了几个小练习！现在贴上来

一.要实现的效果

1.点击按钮切换图片

2.图片的自动切换

二.效果图片

三.代码

css部分

<style type="text/css">
ul{ margin: 0; padding: 0; }
li{ list-style: none; }
#div1{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }
#div1 #L{ float: left; }
#div1 #R{ float: right; }
#div1 li{ width: 48px; height: 26px; border: 1px #ffadad solid; background: #fff7f7; color: #333; line-height: 26px; margin-bottom: 2px; cursor: pointer; }
#div1 img{ height: 206px; width: 188px; }
#div1 .active{ background: #ff8494; color: #fff }
</style>

html

<body>
<div id="div1">
<ul id="L"></ul>
<img src="">
<ul id="R"></ul>
</div>
</body>

js

<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1');
var oUl=div1.getElementsByTagName('ul');
var oImg=div1.getElementsByTagName('img')[0];
var oLi=[];
var oL=oUl[0].getElementsByTagName('li');
var oR=oUl[1].getElementsByTagName('li');
/*这里的图片可以自换*/
var arrImg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/1.png','img/2.png','img/3.png','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/1.png'];
var arrText=['海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼','海贼'];
var len=arrImg.length;
var oldNum=0;
var timer=null;

/*创建左右的li*/
for (var i = 0; i < len/2; i++) {
oUl[0].innerHTML+='<li>'+arrText[i]+'</li>';
oUl[1].innerHTML+='<li>'+arrText[i+ len/2]+'</li>';
}
/*将创建的li添加到数组oLi中*/
for (var i = 0; i < oL.length; i++) {
oLi.push(oL[i]);
}
for (var i = 0; i < oR.length; i++) {
oLi.push(oR[i]);
}
/*将图片加入--函数初始化*/
function fn(n){
oImg.src=arrImg
;
oLi[oldNum].className='';
oLi
.className='active';
oldNum=n;
}
fn(0);
/*点击li切换图片*/
for (var i = 0; i < len; i++) {
oLi[i].index=i;
oLi[i].onmouseover=function(){
fn(this.index);
}
}
/*定时切换图片*/
function show(n){
timer=setInterval(function(){
if (n==len-1) {
speed=-1;
}else if (n==0) {
speed=1;
}
n+=speed;
fn(n)
},1000)
}
show(0);
/*移入移出*/
div1.onmouseover=function(){
clearInterval(timer);
}
div1.onmouseout=function(){
show(oldNum);
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 定时器

相关文章推荐

新的分享

章节导航