JavaScript学习---简易图片轮播
效果如下：
图片定时轮播
点击左右控制显示下一张或上一张图片
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学习---简易图片轮播的更多相关文章
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生Js_简易图片轮播模板
功能:图片自动循环轮播,通过点击“上一张”,“下一张”按钮来控制图片的切换 <!DOCTYPE html> <html> <head> <meta chars ...
- ios 学习 广告图片轮播器
// // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...
- JavaScript数组实现图片轮播
最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- Bootstrap_Javascript_图片轮播
一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...
随机推荐
- LBP特征 学习笔记
这几天一直在做人脸识别的项目,有用到LBP特征,但是毫无头绪,师姐这几天也比较忙,没有时间来指导我,随自己找相应的介绍LBP的博文来看,现在总算有了一个大体的思路了,就写下来吧 注:参考博文: 目标检 ...
- Styles and Themens(3)android所有主题表
The Android platform provides a large collection of styles and themes that you can use in your appli ...
- Linux普通到root用户切换-转
1.Linux中的用户切换:su和su - 的区别 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户,Linu ...
- SpringCloud开发学习总结（三）—— 服务治理Eureka
在最初开始构建微服务系统的时候可能服务并不多,我们可以通过做一些静态配置来完成服务的调用.比如,有两个服务A和B,其中服务A需要调用服务B来完成一个业务操作时,为了实现服务B的高可用,不论采用服务端负 ...
- 工作记录 SQL prompt .net平台版本安装
昨天泡脚了,虽然依然睡的很晚,但是身体很舒服,尽量坚持把 上午尝试用一根网线,链接服务器和笔记本,但是设置好了,Ping不通. 下午安装SQL插件SQL prompt https://www.cnbl ...
- Swift 中的基础语法(二)
1.Swift 中的函数 /// 函数的定义 /// /// - Parameters: /// - x: 形参 /// - y: 形参 /// - Returns: 返回值 func sum(x: ...
- 希尔排序法及其js实现
希尔(Shell)排序又称为缩小增量排序,它是一种插入排序.它是直接插入排序算法的加强版. 希尔增量: 希尔增量是指希尔提出了一种冲破二次时间屏障的算法. Donald Shell 提出了一种冲破二次 ...
- 安卓（Android ）软键盘的控制（显示和隐藏）
Activity 启动时软键盘默认状态 在清单文件(manifest .xml)中可以通过在 Activity 标签中增加属性控制软键盘的默认状态: android:windowSoftInputMo ...
- linux centos 下php的mcrypt扩展
去http://www.sourceforge.net下载Libmcrypt,mhash,mcrypt安装包 libmcrypt(libmcrypt-2.5.8.tar.gz ):mcrypt(mcr ...
- C#运用存储过程新增一条记录并返回自动生成的ID
@Hcy黄灿奕:http://blog.sina.com.cn/iihcy 前言: 1.存储过的好处: 存储过程相对于其他的数据库访问方法有以下的优点: (1)重复使用.存储过程可以重复使用,从而可以 ...