一个简单的图片轮播效果

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学习之路--简单图片轮播的更多相关文章

  1. Vue学习—Vue写一个图片轮播组件

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  2. Jquery实现简单图片轮播

    html代码: <div class="show"> <div class="left"> <div class="sh ...

  3. JQ简单图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Android学习笔记之图片轮播...

    PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...

  5. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  6. Swift 使用CollectionView 实现图片轮播封装就是这样简单

    前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...

  7. swiper插件的简单使用，实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例). <!DOCTYPE html> <html lang="en&qu ...

  8. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  9. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

随机推荐

  1. Java CAS 原理分析

    1.简介 CAS 全称是 compare and swap,是一种用于在多线程环境下实现同步功能的机制(可以把 CAS 看做乐观锁).CAS 操作包含三个操作数 -- 内存位置.预期数值和新值.CAS ...

  2. 5月11日——IOS下如何检测用户是否安装微信

    执行如下代码: var  WXApi  =  plus.ios.import("WXApi"); var  isWXInstalled  =  WXApi.isWXAppInsta ...

  3. 基于ubuntu16.04部署IBM开源区块链项目-弹珠资产管理(Marbles)

    前言 本教程基本上是对Marbles项目的翻译过程. 如果英文比较好的话,建议根据官方操作说明,一步步进行环境部署.当然你也可以参考本教程在自己的主机上部署该项目. Marbles 介绍 关于 Mar ...

  4. Spring Boot实战笔记（五）-- Spring高级话题（Spring Aware）

    一.Spring Aware Spring 依赖注入的最大亮点就是你所有的 Bean 对 Spring容器的存在是没有意识的.即你可以将你的容器替换成其他的容器,如Google Guice,这时 Be ...

  5. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

  6. Spring通过构造方法注入的四种方式

    通过构造方法注入,就相当于给构造方法的参数传值 set注入的缺点是无法清晰表达哪些属性是必须的,哪些是可选 的,构造注入的优势是通过构造强制依赖关系,不可能实例化不 完全的或无法使用的bean. Me ...

  7. PHP访问数据库配置通用方法

    提取一种对数据库配置的通用方式 目的是通过通用类访问配置文件的方式,提供对数据库连接的动态获取和设置,使开发时和生产应用时都能够提供灵活的.简化的.解耦的操作方式.比如在配置文件中配置好两套数据库访问 ...

  8. Linux时间子系统之（十二）：periodic tick

    专题文档汇总目录 Notes:TickDevice模式,以及clocckevent设备.TickDevice设备的初始化,TickDevice是如何加入到系统中的.周期性Tick的产生. 原文地址:L ...

  9. BigDecimal 专题

    //****BigDecimal中传入的double类型的数据,要为String类型,不然得到在BigDecimal仍然是不准确的double数据**** // BigDecimal addend = ...

  10. LoadRunner 11 中Analysis分析

    原文:http://www.cnblogs.com/Chilam007/p/6445165.html analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大量用来 ...