杨老师课堂之JavaScript案例手动切换轮播图片-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79905879      JavaScript案例之手动切换轮播图片 效果图: 思路:     1.
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79905879
    

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

效果图:

思路:

    1.先做界面

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

        1.2引入一张图片

    2.书写Css

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

   3.JavaScript

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

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

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

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

参考代码:

        Html代码

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

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">
		var i = 0;
		function changeImg(){
			i++;
			document.getElementById("img1").src="img/"+i+".jpg"
			if(i==5){
			    i=0;
			}
		}
</script>


分割线 
作者: 杨校

出处: http://blog.csdn.net/kese7952

分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章