文档章节

JavaScript 轮播图

phpweishunlong
 phpweishunlong
发布于 2017/05/14 23:38
字数 153
阅读 8
收藏 0
点赞 0
评论 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>

© 著作权归作者所有

共有 人打赏支持
phpweishunlong
粉丝 1
博文 64
码字总数 26259
作品 0
广州
程序员
Bootstrap 响应式项目分享一

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

Neuro_annie
2017/12/27
0
0
使用translate 实现简单轮播图效果

使用translate实现简单轮播图效果,原理是将轮播图的子块使用translate 循环给值 让每一个子块都在一行上面。然后设置定时器 循环移动大块实现轮播图效果。h5代码如下: js代码实现如下: 实...

eleplant_php
07/02
0
0
jQuery 和 javascript 插入,复制,替换和删除节点

今天为了写轮播图,重新看了下 js Dom操作。 jquery 参考 http://www.w3school.com.cn/jquery/jqueryref_manipulation.asp; javascript 参考 http://www.w3school.com.cn/jsref/domobj_all.......

崔小凯
2015/03/31
0
0
解决在使用CSS3制作不间断轮播图中 收尾连接后Interval 延时问题

问题:使用CSS3制作不间断轮播图中 原理就是克隆一个首个轮播图在整个轮播图的尾部,尾部播放放以后继续播放克隆的首部块,然后在把真整个块拉回原来的位置 继续播放。 其中涉及到的一个体验...

eleplant_php
07/04
0
0
最近排查android webview https的发热耗电和加载速度慢问题解决

最近排查android webview https的发热耗电和加载速度慢问题 问题:H5页面发热耗电 排查:通过android studio profiler 查看CPU消耗曲线,发现静置情况下webview轮播图波浪式消耗CPU,且峰值高...

ljianbing
05/28
0
0
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
0
0
图片轮播之:静若处子,动若脱兔(为什么我不来写一篇关于图片轮播的博客呢?)

一、闲聊: 图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学...

乐派电影
2014/04/21
0
5
第06章节-Python3.5-插件轮播 5

第06章节-Python3.5-插件轮播(轮播图插件,不重复造轮子) 打开浏览器搜索bxslider或打开(https://bxslider.com/) 或打开bxslider中文翻译网(http://www.jq22.com/jquery-info7010) 或打开(ht...

阿啦卜
07/20
0
0
轮播图的效果实现小米商城和京东商城

案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: Title

tty之星
07/20
0
0
React 轮播图之二菜单栏左右滑动特效(swiper.js)

之前也写了react中的轮播图,用的是react-swipe 现在用的是在react中导入swiper.js来实现菜单栏左右滑动特效。话不多说,还是上代码: 注意:在react中一定要记得导入swiper.min.css。impor...

luyanwei79
04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

一款成功的全球服游戏该如何进行架构选型与设计?

全球服游戏如今正在成为出海游戏的主要考虑模式,跨国对战、全球通服打破国界的限制,将不同地区不同语言的玩家放在一起合作/竞技,成功吸引了大量玩家的关注,并逐渐成为主流的游戏玩法。 ...

UCloudTech
5分钟前
0
0
StringUtils类中isEmpty与isBlank的区别

org.apache.commons.lang.StringUtils类提供了String的常用操作,最为常用的判空有如下两种isEmpty(String str)和isBlank(String str)。 StringUtils.isEmpty(String str) 判断某字符串是否为...

说回答
17分钟前
0
0
react native使用redux快速上手

看例图 要求点击组件一中的按钮,改版组件二的背景色。 利用state和props和容易实现。 //app.jsimport React, {Component} from 'react';import {StyleSheet, Button, View, Text} from ...

燕归南
19分钟前
0
0
页面输出JSON格式数据

package com.sysware.utils;import java.io.IOException;import javax.servlet.ServletResponse;import org.apache.log4j.Logger;import com.sysware.SyswareConstant;pub......

AK灬
40分钟前
0
0
springCloud-2.搭建Eureka Client的使用

1.使用IDEA,Spring Initializr创建 2.填写项目资料 3.选择spring boot版本,插件选择Cloud Discovery→Eureka Discovery 4.选择保存地址 5.修改application.yml eureka: client: s...

贺小康
43分钟前
0
0
CenOS 6.5 RPM 安装 elasticsearch 6.3.1

下载 wget --no-check-certificate https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.1.rpm...

阿白
46分钟前
0
0
1.4 创建虚拟机&1.5 安装CentOS7&1.6 配置ip(上)&1.7 配置ip(下)

1.4 创建虚拟机 知识点 虚拟机网络链接模式 桥连 直接将虚拟网卡桥接到一个物理网卡上面。需要手工为虚拟系统配置IP地址、子网掩码,而且还要和宿主机器处于同一网段,这样虚拟系统才能和宿主...

小丑鱼00
52分钟前
0
0
TrustAsia(亚洲诚信)助力看雪2018安全开发者峰会

2018年7月21日,看雪2018安全开发者峰会在北京国家会议中心圆满落下帷幕。拥有18年悠久历史的老牌安全技术社区——看雪学院联手国内最大开发者社区CSDN,汇聚业内顶尖的安全开发者和技术专家...

亚洲诚信
54分钟前
0
0
Spring注解介绍

@Resource、@AutoWired、@Qualifier 都用来注入对象。其中@Resource可以以 name 或 type 方式注入,@AutoWired只能以 type 方式注入,@Qualifier 只能以 name 方式注入。 但它们有一些细微区...

lqlm
今天
0
0
32位汇编在64位Ubuntu上的汇编和连接

本教程使用的操作系统是Ubuntu Linux 18.04 LTS版本,汇编器是GNU AS(简称as),连接器是GNU LD(简称ld)。 以下是一段用于检测CPU品牌的汇编小程序(cpuid2.s): .section .dataoutput...

ryanliue
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部