html学习之路--简单图片轮播
一个简单的图片轮播效果
photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单图片轮播</title>
<link rel="stylesheet"href="css/photo.css">
</head>
<body>
<div class="warpper">
<div class="header">
<div class="logo">photos of tutuj</div>
</div>
<div class="main">
<div id="pics">
<img src="img/1.jpg"/>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<script src="js/photo.js"></script>
然后对网页进行一个非常简单的CSS美化。
.logo{
font-size:18px;
color:brown;
background-color: #F0F8FF;
font-family: "calisto mt";
}
/* 具体到元素标签 */
#pics img{
margin-top:10px;
width:300px;
height:300px;
}
最后是js文件对图片轮播进行控制。
//获取内容
var pics=document.getElementById("pics");
var n=1;
setInterval(function(){
if(n>4) n=1;
pics.innerHTML="<img src='img/"+n+".jpg'/>";
n++;
},1000);
最后的效果是每隔一秒对图片进行变换,变换到最后一幅时再从第一幅开始变换。
html学习之路--简单图片轮播的更多相关文章
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- Jquery实现简单图片轮播
html代码: <div class="show"> <div class="left"> <div class="sh ...
- JQ简单图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android学习笔记之图片轮播...
PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...
- 用Vue实现一个简单的图片轮播
本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...
- Swift 使用CollectionView 实现图片轮播封装就是这样简单
前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...
- swiper插件的简单使用,实现图片轮播
移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
随机推荐
- android dp深度解析(转)
我转载地方的连接:http://zhangkun716717-126-com.iteye.com/blog/1772696 当笔记记录一下 dip: device independent pixel ...
- [Mysql]——通过例子理解事务的4种隔离级别(转)
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 一.事务隔离级别分类 第1级别:R ...
- 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法
比如Json.NET的JObject明明实现了IEnumerable<T>,具体来说是IEnumerable<KeyValuePair<string, JToken>&g ...
- linux编译安装时常见错误解决办法
This article is post on https://coderwall.com/p/ggmpfa 原文链接:http://www.bkjia.com/PHPjc/1008013.html ...
- Prefer ThreadLocalRandom over Random
Java 7 has introduced a new random number generator - ThreadLocalRandom Normally to generate Random ...
- javascript 判断对象类型
typeof typeof是一个一元运算符,它返回的结果 始终是一个字符串,对不同的操作数,它返回不同的结果. 此表总结了typeof所有可能的返回值: 操作数类型 返回值 undefined &qu ...
- 任务调度--spring下的任务调度quartz
之前写过Timer实现任务调度,这篇文章用来写一下在spring下使用quartz实现任务调度,直接上代码: 定义任务对象: package com; /** * 1. 定义任务对象 * * @aut ...
- VM虚拟机下安装liunx系统
1.首先打开VMware看到如图所示,然后点击创建虚拟机,选择典型然后下一步 2.选择我稍后安装操作系统然后下一步,选择Linux系统然后下一步.给虚拟机起一个名字,和选择把虚拟机安装在那个位置.然后 ...
- Python爬取谷歌街景图片
最近有个需求是要爬取街景图片,国内厂商百度高德和腾讯地图都没有开放接口,查询资料得知谷歌地图开放街景api 谷歌捷径申请key地址:https://developers.google.com/maps ...
- 安卓----Spinner
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android=" ...