文档章节

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.3K
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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.3K
18
64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
69
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
34
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
130
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部