效果如下：

图片定时轮播

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

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. 递推DP UVA 473 Raucous Rockers

    题目传送门 题意:n首个按照给定顺序存在m张光盘里,每首歌有播放时间ti,并且只能完整的存在一张光盘里,问最多能存几首歌 分析:类似01背包和完全背包,每首歌可存可不存,存到下一张光盘的情况是当前存不 ...

  2. 如何用C#动态编译、执行代码[转]

    原文链接 在开始之前,先熟悉几个类及部分属性.方法:CSharpCodeProvider.ICodeCompiler.CompilerParameters.CompilerResults.Assemb ...

  3. 转 Docker Swarm vs Kubernetes

    容器化已经改变我们部署软件和微服务开发的方式.如果你刚听说容器, 这篇博客帮你入门. 什么是容器编排 容器能够把服务打包成基本单元,你可以把它部署到任何地方:本地机器.测试环境或者生产系统.但是在生产 ...

  4. IE8下ajax兼容问题

    function crossDomainAjax(url, successCallback) { // IE8 & 9 only Cross domain JSON GET request i ...

  5. vue项目中安装cnpm和node_modules

    1.安装cnpm的nodejs包管理工具,命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org   2. 每个vue项 ...

  6. Android开发-下载网络图片并显示到本地

    Android下载网络图片的流程是: 发送网络请求->将图片以流的形式下载下来->将流转换为Bitmap并赋给ImageView控件. 注意点 最新的Android系统不可以在主线程上请求 ...

  7. .Net中的强名称(Strong Name)

    我在CSDN上的文章, 转载与此: .Net中的强名称(Strong Name) http://blog.csdn.net/Anor/article/details/3649646

  8. 手机端打开调试工具，模拟console.log

    将下列代码考入需要调试页面即可 <script src="//cdn.jsdelivr.net/npm/eruda"></script> <scrip ...

  9. docker 容器挂载主机目录，访问出现 cannot open directory /mnt/home/webroot/: Permission denied 的解决办法

    问题原因及解决办法 原因是CentOS7中的安全模块selinux把权限禁掉了,至少有以下三种方式解决挂载的目录没有权限的问题: 1.在运行容器的时候,给容器加特权,及加上 --privileged= ...

  10. 微信小程序图片上传java后台（前后端代码）

    小程序代码 upload:function(e){ var that = this; wx.showActionSheet({ itemList: ['从相册选择','拍照'], itemColor: ...