效果如下：

图片定时轮播

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

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. 01背包 Codeforces Round #267 (Div. 2) C. George and Job

    题目传送门 /* 题意:选择k个m长的区间,使得总和最大 01背包:dp[i][j] 表示在i的位置选或不选[i-m+1, i]这个区间,当它是第j个区间. 01背包思想,状态转移方程:dp[i][j ...

  2. 积分图像的应用（一）：局部标准差 分类： 图像处理 Matlab 2015-06-06 13:31 137人阅读 评论(0) 收藏

    局部标准差在图像处理邻域具有广泛的应用,但是直接计算非常耗时,本文利用积分图像对局部标准差的计算进行加速. 局部标准差: 标准差定义如下(采用统计学中的定义,分母为): 其中. 为了计算图像的局部标准 ...

  3. 最简单的struts实例介绍

    struts2环境配置   struts2框架,大多数框架都在使用.由于工作需要,开始做Java项目.先学个struts2. 一.下载struts2 有好多版本,我下载的是struts-2.2.1.1 ...

  4. 【Hibernate】Access to DialectResolutionInfo cannot be null when 'hibernate.dialect' not set

    今天用hibernate框架写crm项目时遇到报错: Access to DialectResolutionInfo cannot be null when 'hibernate.dialect' n ...

  5. 个人复习记录之-js

    1变量:内存中储存一个数据的储存空间. 使用:声明,赋值,取值.注 不能以数字开头,不能用保留字 *声明提前:在程序正式执行前,都会将所有var声明的变量提前到开始位置,集中创建***赋值留在原地** ...

  6. 波哥！一个不安分的IT男

    第一篇博文,紧张,窃喜,辣眼睛! 这个订阅号主要是写给自己的,近期越来越发现记忆力不如以前了! 时光如梭,岁月荏苒,或许这两句经典的开头文比较契合自己的年纪.依稀记得几年前还在组装服务器.搬机柜.做系 ...

  7. CCF|游戏|Java

    import java.util.Scanner; public class tyt { public static void main(String[] args) { Scanner in = n ...

  8. jquery 序列化form表单

    1.为什么要将form表单序列化? ajax上传form表单的原始方式,是将form表单中所需要的键值对先获取,然后再组装成数据(两种方式:http:localhost:8080/test.do?pe ...

  9. spark 学习路线及参考课程

    一.Scala编程详解: 第1讲-Spark的前世今生 第2讲-课程介绍.特色与价值 第3讲-Scala编程详解:基础语法 第4讲-Scala编程详解:条件控制与循环 第5讲-Scala编程详解:函数 ...

  10. R Programming week2 Control Structures

    Control Structures Control structures in R allow you to control the flow of execution of the program ...