效果如下：

图片定时轮播

点击左右控制显示下一张或上一张图片

index.html文件

<html>

	<head>

		<title>

			js编写实现幻灯片效果

		</title>

		<meta content="text/html; charset=utf-8" />

		<link rel="stylesheet" href="css/style.css" type="text/css" />

	</head>

	<body>

		js编写实现幻灯片效果

		<div class="content">

			<div id="cimg1" >

			 <img src="data:images/1.jpg" id="imgs"/>

			 <div id="cimg4"><img src="data:images/left.png"  /></div>

			 <div id="cimg5"><img src="data:images/right.png"  /></div>

			 <div id="text">

			 	<p id="textfont">

			 	</p>

			 </div>

		  </div>

		</div>

	</body>

	<script src='js/index.js'></script>

</html>

css样式代码：（css/style.css）

.content{

	width:450px;

	height:300px;

	margin: 120px auto;

	}

#cimg1 img{

		width:450px;

		height:300px;

		}

#cimg4{

	  width:30px;

	  height:25px;

	  position:relative;

		left:0px;

		top:-150px;

	}

#cimg5{

	  width:30px;

	  height:25px;

	  position:relative;

		left:420px;

		top:-175px;

	}

#cimg4 img{

		width:20px;

		height:25px;

		}

#cimg5 img{

		width:20px;

		height:25px;

		}

#text{

	height:50px;

	width:100%;

	background:#222222;

	position:relative;

		left:0px;

		top:-100px;

	}

#text p{

	color:#fff;

	text-align:center;

	}

JavaScript代码（js/idnex.js）

	//获取放置图片div的对象

	cimg1obj=document.getElementById("cimg1");

	imgsobj=document.getElementById("imgs");

	textobj=document.getElementById("textfont");

	//左右翻转的图片

	cimg4obj=document.getElementById("cimg4");

	cimg5obj=document.getElementById("cimg5");

	cimg4obj.onmouseover=function () {

		cimg4obj.style.background="#b3b3b3";

		cimg4obj.style.borderRadius="20px"

		} 

	 cimg4obj.onmouseout=function () {

		cimg4obj.style.background="";

		}

	 cimg5obj.onmouseover=function () {

		cimg5obj.style.background="#b3b3b3";

		cimg5obj.style.borderRadius="20px"

		}

	cimg5obj.onmouseout=function () {

		cimg5obj.style.background="";

		}

	//向左的图标被点击时

	//变量i用于记录当前的图片

	//可以控制图片轮播的数量当前i的最大值只能为3，最小为0

	i=1;

	imgsobj.src="data:images/"+i+".jpg";//默认幻灯片出来的图片是第一张

	textadd();

		//向左的图标被点击时

	cimg4obj.onclick=function () {

		i--;

		if(i==0){

			i=3;

			}

			imgsobj.src="data:images/"+i+".jpg";//重写图片路径

				textadd();

		}

	//向右的图标被点击时

	cimg5obj.onclick=function () {

		i++;

		if(i==4){

			i=1;

			}

			imgsobj.src="data:images/"+i+".jpg";//重写图片路径

				textadd();

		}

//创建定时器实现自动图片轮播每隔5秒换一张图

		setInterval("jishi()",5000);//1000为1秒钟

       function jishi()

       {

           i++;

						if(i==4){

							i=1;

							}

							imgsobj.src="data:images/"+i+".jpg";//重写图片路径

								textadd();

        }

        //为相应的图像添加文字

        function textadd(){

        	switch (i) {

								case 1:

									 textobj.innerHTML="《霸王别姬》<br/>说的是一辈子!差一年,一个月,一天,一个时辰,都不算一辈子! ";

								break;

								case 2:

									  textobj.innerHTML="《春光乍泄》<br/>试问谁不想从头来过,但世间又有多少爱可以重来呢?";

								break;

								case 3:

									  textobj.innerHTML="《东邪西毒》<br/>你不能再拥有的时候。你唯一可以做的，就是让自己不要忘记。";

								break;

							}

        	}

JavaScript学习---简易图片轮播的更多相关文章

  1. javaScript 手写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 原生Js_简易图片轮播模板

    功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...

  3. ios 学习 广告图片轮播器

    // // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...

  4. JavaScript数组实现图片轮播

    最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  5. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  8. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  9. Bootstrap_Javascript_图片轮播

    一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...

随机推荐

  1. MFC显示文本文档 分类： MFC 2014-12-30 10:03 457人阅读 评论(1) 收藏

    新建基于对话框的MFC应用程序.资源视图的对话框上添加编辑框(Edit Control)和按钮(Button), 将编辑框属性:Mutiline.Auto HScroll.Auto VScroll设为 ...

  2. openssh安装、设置指定端口号、免密码登录、变量传递、防暴力破解

    首先确保机器挂在好光盘镜像,然后查看软件包信息 [root@xuegod63 ~]# df -hFilesystem      Size  Used Avail Use% Mounted on/dev ...

  3. JDBC基础学习

    1.概念:java数据库连接技术 2.JDBC:是一个规范,提供接口(面向接口编程) 3.JDBC API:提供程序员调用的接口和类,集成在java.sql 和javax.sql包中.如:Driver ...

  4. Android使用Gson（相当于C#的Newtonsoft.Json）非常好用

    C#转Java有一段时间了,之前做ASP.NET WebAPI微软竟将第三方类库Newtonsoft.Json作为VS新建MVC和WebAPI项目默认必备的Json工具Nuget包,可想而知这个包有多 ...

  5. idea 调试工具的使用

    原文:https://blog.csdn.net/hao_hl1314/article/details/53120918 Intellij IDEA Debug调试区工具的使用方法 快捷键F9     ...

  6. install nginx error

    the error info : the HTTP gzip module requires the zlib library.You can either disable the module by ...

  7. 图解 TCP/IP 第六章 TCP与UDP 笔记6.1 传输层的作用

     图解 TCP/IP  第六章 TCP与UDP   笔记6.1 传输层的作用   传输层必须指出这个具体的程序,为了实现这一功能,使用端口号这样一种识别码.根据端口号,就可以识别在传输层上一层的应用程 ...

  8. 未找到框架“.NETFramework,Version=v4.5”的引用程序集

    问题描述 一般是在编译的时候会出现这样子的问题, 问题原因: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETF ...

  9. 在PetaPoco中使用Where in

    之前一直没在意,今天查了很多资料,才知道在petapoco中使用in关键字需要使用命名参数,否则是无效的(或者只查出第一个条件的记录),示例如下: var tags= new string[]{“c1 ...

  10. Java基础(十三)--深拷贝和浅拷贝

    在上篇文章:Java基础(十二)--clone()方法,我们简单介绍了clone()的使用 clone()对于基本数据类型的拷贝是完全没问题的,但是如果是引用数据类型呢? @Data @NoArgsC ...