使用javascript实现轮播图效果(onload页面加载事件和定时函数setinterval())
技术分析
- 获取元素document.getElementById(“id名称”);
- 事件(onload)这是一个页面加载函数,点击该页面就就会加载该函数。
- setInterval()函数
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
定时函数setInterval()语法：setInterval(code,millisec[,“lang”])，code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。举例setinterval(“changeImg()”,1000);
**定时函数setInterval()返回值:**一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
分析代码步骤
- 写javascript代码首先要确定事件是onload页面加载事件
- 写替换轮播图图片函数changeImg()
- 在onload()函数里写,定时函数setinterval()去定时调changeimg()函数
书写javascript轮播图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#page{
/*border:1px solid red;*/
width:1320px;
height:1244px;
margin:auto;
}
#titleBar{
/*border:1px solid blue;*/
width:1320px;
height:45px;
}
.titleBar_one{
/*border:1px solid black;*/
width:438px;
height:45px;
/*所有标题框向左浮动*/
float:left;
}
#titleBar_one_col{
padding-top:10px;
}
ul li{
/*列表标签改为内联(行专列)*/
display:inline;
}
#menu{
/*border:1px solid green;*/
width:1320px;
height:45px;
background:black;
}
.ul_li{
color:white;
}
#lunbo{
/*border:1px solid red;*/
width:1320px;
height:500px;
}
#new_product{
/*border:1px solid black;*/
width:1320px;
height:450px;
}
#new_product_top{
/*border:1px solid blue;*/
width:1320px;
height:33px;
padding-top:12px;
}
#new_product_buttom{
/*border:1px solid red;*/
width:1320px;
height:400px;
}
#new_product_buttom_left{
/*border:1px solid black;*/
width:240px;
height:400px;
float:left;
}
#new_product_buttom_right{
/*border:1px solid green;*/
width:535px;
height:200px;
float:left;
}
.new_product_buttom_right_item{
/*border:1px solid blue;*/
width:177px;
height:200px;
float:left;
}
#gaungao{
/*border:1px solid green;*/
width:1320px;
height:130px;
}
a{
/*去除超链接的下划线*/
text-decoration:none;
}
</style>
<script>
//轮播图代码实现
//1.确定使用页面加载事件
function init(){
//3.书写定时任务函数
window.setInterval("changeImg()",2000);
}
var i=0;
//2.书写替换图片代码
function changeImg(){
i++;
document.getElementById("lunboimg").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body οnlοad="init()">
<div id="page">
<div id="titleBar">
<div class="titleBar_one">
<img id="titleBar_one_col" src="../img/logo2.png" width="300px" height="30px"/>
</div>
<div class="titleBar_one" align="center">
<img src="../img/header.png" width="400px" height="45px"/>
</div>
<div class="titleBar_one">
<ul>
<a href="#"><li>登录</li></a>
<a href="#"><li>购物车</li></a>
<a href="#"><li>注册</li></a>
</ul>
</div>
</div>
<div id="menu">
<ul>
<li style="font-size: 25px;" class="ul_li">首页</li>
<li class="ul_li">手机数码</li>
<li class="ul_li">家用电器</li>
<li class="ul_li">育婴保健</li>
<li class="ul_li">鞋靴箱包</li>
<li class="ul_li">奢侈品</li>
</ul>
</div>
<!--轮播-->
<div id="lunbo">
<img id="lunboimg"src="../img/1.jpg" width="100%" height="100%"/>
</div>
<!--最新商品-->
<div id="new_product">
<div id="new_product_top">
<font size="5">最新商品</font>
<img src="../img/title2.jpg" />
</div>
<div id="new_product_buttom">
<div id="new_product_buttom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="new_product_buttom_right">
<img src="../img/middle01.jpg" width="100%" height="100%"/>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
<div class="new_product_buttom_right_item" align="center">
<img src="../img/small03.jpg" align="center" width="" height=""/><br/>
<a href="#"><font color="#CCCCCC">电炖锅</font><a/><br/>
<strong><font color="red">199.00</font></strong>
</div>
</div>
</div>
<!--广告-->
<div id="gaungao">
<img src="../img/ad.jpg" width="100%" height="100%"/>
</div>
<!--友情链接和版权信息-->
<div id="linajie" align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright @ 2019-2020 乱七八糟商城 归ginger所有
</p>
</div>
</div>
</body>
</html>
页面效果展示
