效果如下：

图片定时轮播

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

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. [POI2010]Antisymmetry

    Description 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作"反对称"字符串.比如00001111和010101就是反对称的,100 ...

  2. c#如何使用replace函数将"\"替换成"\\"

    当我使用 String str="c:\aa.xls"; str=str.Replace("\","\\");时,括号为红色错误的,那么如何 ...

  3. D. Artsem and Saunders 数学题

    http://codeforces.com/contest/765/problem/D 这题的化简,不能乱带入,因为复合函数的带入,往往要严格根据他们的定义域的 题目要求出下面两个函数 g[h(x)] ...

  4. XML To Linq 读取Sharepoint列表中的附件列信息

    通过页面查看,列表附件信息列的内容如下: var x = @"<div class='ExternalClass9936DCD1F074427B891D09CFCEFC2AB6'> ...

  5. h5学习-webstorm工具的激活

    这里有个快速激活webstorm的方法:http://jingyan.baidu.com/article/9f63fb919674f2c8400f0e9a.html h5的轮廓工具:https://g ...

  6. 新奇：（nodejs兄弟）用HTML + FLASH +JS 也可以写桌面EXE。

    首先看下面这张图片,下面的所有界面都是用html代码实现的. 编程IDE:vb6.0 使用控件:WEBBROWSER 原理:使用olelib 让程序继承:IDocHostUIHandler 和 ICu ...

  7. photoshop cs6安装和破解步骤

    http://tieba.baidu.com/p/4791130877 http://www.frontopen.com/1181.html

  8. ascii - 在八进制，十进制，十六进制中的 ASCII 字符集编码

    描述 ASCII 是美国对于信息交换的标准代码,它是7位码,许多8位码(比如 ISO 8859-1, Linux 的默认字符集)容纳 ASCII 作为它们的下半部分.对应的国际 ASSII 是 ISO ...

  9. webstorm 创建es6项目 babel 转 es5

    node 安装 webstorm 安装 略过 npm install -y //生成package.json npm install babel-cli -g //全局安装babel-cli npm ...

  10. 谈谈JVM垃圾回收机制及垃圾回收算法

    一.垃圾回收机制的意义 Java语言中一个显著的特点就是引入了垃圾回收机制,使c++程序员最头疼的内存管理的问题迎刃而解,它使得Java程序员在编写程序的时候不再需要考虑内存管理.由于有个垃圾回收机制 ...