JavaScript模拟轮播图效果

轮播图

相信小伙伴们应该不会陌生吧~

就是网站中间的那个

会定时切换的商品图

今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~

那么咱们开动了，额~先准备好几章轮播图片（直接在网上找的壁纸~φ(>ω<*) ）我们先来个手动版的过度一下~

实现步骤：

1）根据id获取元素

document.getElementById("")

2）每点击一次按钮我们就修改一次元素的src属性的值

document.getElementById("").src=

代码：

640?wx_fmt=jpeg

看一下效果：

640?wx_fmt=gif

这个效果需要我们点击下面的按钮才能实现图片切换~下面我们来升级一下，把这个效果变成自动的~

自动的就需要用到定时器了，在JavaScript对象中的window下面有一个 setInterval() 方法。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

分析步骤：

1）确定事件（onload）绑定函数

2）获取元素的src属性并修改值

3）设置定时器，运行函数

代码：

<html>
 <head>
   <meta charset="UTF-8">
   <title>切换图片</title>
   <style type="text/css">
     div{
       border: 1px solid white;
       width:600px ;
       height:400px;
       margin: auto;
       text-align: center;
     }
   </style>
   <script type="text/javascript">
     function init(){
       //设置定时器
       window.setInterval("changeImg()",3000);
     }
     
     var i=1;
     function changeImg(){
       i++;
       //获取图片位置设置src属性
       document.getElementById("img").src="img/"+ i%3+".jpg";
     }
   </script>
 </head>
 <body onload="init()">
   <div>
     <img src="img/1.jpg" width="100%" height="100%" id="img"/>
   </div>
 </body>
</html>

效果和上面的一样~咱们就不给大家演示了~注意要修改一下图片的路径哈~（其实在实际的项目开发中~轮播图不是这么干的~所以领会精神哈~）

JavaScript的引入方式和CSS一样，JavaScript也是有引用方式的~
1）内部引入
就像上边的代码一样把 js 代码写进~
<script type="text/javascript"></script>标签中

2)外部引入
创建一个 x.js的文件然后用src把文件引入进来
<script type="text/javascript" src=“x.js”></script>

那么今天就到这了~
小伙伴们自己来试试吧~
我是萌新娜娜
立志做一个不翻车的老司机
学习Java的路上请多多指教

扩展阅读
史上最全的Javascript面试题总结
JavaScript入门写一个表单校验功能
Javascript 将 HTML 页面生成 PDF 并下载

来源：Java联盟
文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除或授权事宜

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/Y0Q2T57s/article/details/82719314
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-02-13 14:53:20
阅读 ( 1144 )
分类：

JavaScript模拟轮播图效果

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看