杨老师课堂之JavaScript案例之自动切换轮播图片

JavaScript案例之自动切换轮播图片

效果图:

思路:

    1.先做界面

        1.1制作按钮及点击触发事件

        1.2引入一张图片

    2.书写Css

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

   3.JavaScript

        3.1定义“初始化”函数, 设置定时器  时间为3000毫秒           

        3.2定义一个变量 i  即原图的数字名称 

        3.3定义函数:将变量i进行自增。

        3.4通过id获取图片元素所在位置,并在后面输出图片路径及图片名称i 的变量

        3.5判断:当图片到达最后一张,将图片变量重置为0,进行循环递加到原图的图片名称1上去

参考代码:

        Html代码

           <body onload="init()">   
             <div ">
			<input type="button" value="手动切换" onclick="changeImg()" />
			<img src="img/1.jpg" width="100%" id="img1"/>
		</div>
            </body>

CSS代码:

<style type="text/css">
		div{
			width: 500px;
			height: 350px;
			border: 1px solid white;
			margin: auto;
			text-align: center;
		}
	</style>

  JavaScript代码

<script type="text/javascript">
	function init(){
	    setInterval("changeImg()",3000);//轮播图片显示的定时操作
	}	
            var i = 0;
		function changeImg(){
			i++;
			document.getElementById("img1").src="img/"+i+".jpg"///获取图片位置并设置src属性值
			if(i==5){
			    i=0;
			}
		}
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

13220
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

402110
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

52870
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

19280
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

15720
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

22160
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

61130
来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

12930
来自专栏编程坑太多

事件对象的使用、属性和方法

13430
来自专栏一个会写诗的程序员的博客

CSS 弹性布局 flex 属性详解

定义了当flex容器有多余空间时,item是否放大。默认值为0,即当有多余空间时也不放大;可能的值为整数,表示不同item的放大比例,如

10030

扫码关注云+社区

领取腾讯云代金券