文档章节

JavaScript 轮播图

phpweishunlong
 phpweishunlong
发布于 2017/05/14 23:38
字数 153
阅读 12
收藏 0
<?php


//从数据库查询得到图片路径
$picArr = array(
	'./img/58bb9f4bNf76d342d.jpg',
	'./img/58b9260eN0aea7d3e.jpg',
);

$picStr = json_encode($picArr);


?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>


<img src="" alt="">
<div id="turn">

	<img src="./img/58bb9f4bNf76d342d.jpg" alt="">
</div>

<script>


//通过自调函数将功能封装起来
(function () {

	// 轮播图的思路: 每隔2s,就改变图片src的内容

	var turn = document.getElementById('turn');

	var img = turn.getElementsByTagName('img')[0];
	// console.log(img);

	//var imgs = <?php //echo '123';?>

	//得到PHP给的图片地址
	var picArr = <?php echo $picStr;?>;

	var i = 0;

	//每2s改变一下img标签的src属性的值
	setInterval(function () {


		if (i >= picArr.length ) {

			i = 0;
		}


		img.src = picArr[i];

		i++;
	}, 1000);

})();





</script>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
下一篇: JavaScript 函数
phpweishunlong
粉丝 1
博文 64
码字总数 26288
作品 0
广州
程序员
私信 提问
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
2018/08/06
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
新手问题 Bootstrap2 轮播 自动播放 该怎么设置

我用Bootstrap2做了个wp模板但是轮播图不自动播放 需要手动才能播放 Bootstrap文档没太懂 js正在学 感觉是js设置问题,但js还不会 我是自学的,有地方不懂 希望指点 谢谢...

本源
2014/01/02
2.2K
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
2018/08/12
0
0
python前端jQuery综合应用

传智播客知识点预习 1.幻灯片的制作2.json数据格式及ajax 01- 轮播图-获取相关元素[mw_shl_code=applescript,true]var $slide = $('.slide'), // 轮播区域的div 2- 轮播图-添加小圆点[mw_shl...

czbkzmj
2018/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
7
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
3
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
2
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
1
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部