效果如下：

图片定时轮播

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

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. L - Prime Number（求n内质数的个数）

    Description Write a program which reads an integer n and prints the number of prime numbers which ar ...

  2. Activity状态图、生命周期图（超详细），onSaveInstanceState只保存、恢复基本ui数据，持久数据不在这里保存。

    1.Activity状态图 2.Activity生命周期简图 启动Activity: onCreate()—>onStart()—>onResume(),Activity进入running ...

  3. 225 Implement Stack using Queues 队列实现栈

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack.pop ...

  4. Spring注解驱动开发之AOP

    前言:现今SpringBoot.SpringCloud技术非常火热,作为Spring之上的框架,他们大量使用到了Spring的一些底层注解.原理,比如@Conditional.@Import.@Ena ...

  5. 2556. [NOIP2016]玩具谜题

    [题目描述] 小南有一套可爱的玩具小人,它们各有不同的职业.有一天,这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝国内,有的面朝圈外.如下图: 这时singer告诉小南 ...

  6. Jenkins .NET项目持续集成配置

    基本步骤 1. 安装并配置MSBUILD 在系统管理->插件管理->添加MSBuild插件 在系统管理->系统设置->找到MSBuild配置部分,配置不同的MSbuild版本 ...

  7. IntelliJ IDEA导入JDK出现The selected directory is not a valid home for JDK问题的解决方法

    JDK版本与IDEA版本不兼容: JDK版本过高可能会造成这个问题,需与IDEA相兼容的JDK才行. 比如,用IDEA2016.3.8版本的,JDK用jdk-10.0.1_windows-x64_bi ...

  8. C# GDI+ 画坐标(x,y)

    private void button1_Click(object sender, EventArgs e) { Graphics g = this.CreateGraphics(); g.Clear ...

  9. ANALYZE - 收集与数据库有关的统计

    SYNOPSIS ANALYZE [ VERBOSE ] [ table [ (column [, ...] ) ] ] DESCRIPTION 描述 ANALYZE 收集有关 PostgreSQL ...

  10. CE工具里自带的学习工具--第五关

    图解: 此时会弹出一个对话框,选择是就可以了,最终会看到: