如何使用javascript做一个网页轮播图

最新推荐文章于 2022-07-06 16:28:54 发布

weixin_34357887

最新推荐文章于 2022-07-06 16:28:54 发布

阅读量863

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/12315-/p/4716178.html

版权

1、轮播图在网页中是非常常见的，所以做轮播图是必然的！

2、首先在网页上设置轮播图的区域（也就是div）！

3、然后在div里面插入图片再通过javascript改变图片的路径更改图片达到轮播的效果！

定义一个div 代码如下：

<div>
    <img src="1_b.jpg" id="img">
</div>
设置div的样式：  
<style type="text/css">
div{
width: 200px;
height: 200px;
    }
</style>
接下来使用JavaScript改变图片的路径：
 <script type="text/javascript">
var  div=document.getElementsByTagName("div")[0];//获得div的对象！
var  img=document.getElementById("img"); //获得图片的对象
var i=2;先定义一个图片变量
setInterval(function(){
　　　　//setInterval定时器每1s调用一次匿名函数 实现每1s改变一次图片的路径！达到轮播效果！
img.src=i+"_b.jpg";//改变图片的路径
i++;  //每次把i加一次
if(i>5){
　　　　　　　　//做一个判断 如果i大于5则把i的值重新赋值为1！
i=1;
        }
    },1000)
</script>

//完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
div{
width: 200px;
height: 200px;
        }
</style>
</head>
<body>
<div>
    <img src="1_b.jpg" id="img">
</div>
<script type="text/javascript">
var  div=document.getElementsByTagName("div")[0];
var  img=document.getElementById("img");
var i=2;
setInterval(function(){
img.src=i+"_b.jpg";
i++;
if(i>5){
i=1;
        }
    },1000)
</script>
</body>
</html>

转载于:https://www.cnblogs.com/12315-/p/4716178.html

weixin_34357887

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何使用javascript做一个网页轮播图

1、轮播图在网页中是非常常见的，所以做轮播图是必然的！2、首先在网页上设置轮播图的区域（也就是div）！3、然后在div里面插入图片再通过javascript改变图片的路径更改图片达到轮播的效果！定义一个div 代码如下：<div> <img src="1_b.jpg" id="img"></div>设置div的样式： &lt...
复制链接

扫一扫