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 样式,并 ...
随机推荐
- 题解报告：hdu 2544 最短路
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 Problem Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t ...
- Thinkpad x230设置启动顺序
设置可以从CD或者USB启动1.F1进入BIOS,Security → Secure Boot ,设置为:Disabled2.Startup → UEFI/Legacy Boot ,设置为:Both( ...
- GC_CONCURRENT freed 循环不停打印日志
打印类似如下语句: 03-07 19:21:49.562: D/dalvikvm(1677): GC_CONCURRENT freed 2859K, 20% free 12020K/15011K, p ...
- SpringMVC与请求控制器
MVC设计模式 视图(View) -对应组件:JSP或者HTML文件 控制器(controller) -对应组件:Servlet 模型(Model) -对应组件:JavaBean MVC ...
- iOS Programming Camera 2
iOS Programming Camera 2 1.1 Creating BNRImageStore The image store will fetch and cache the image ...
- git创建分支及日常使用
克隆代码 git clone https://github.com/master-dev.git 查看所有分支 git branch --all # 默认只有master分支,所以会看到如下两个分支 ...
- iOS-UI控件之UIImageView
contentMode属性 带有scale单词的:图片有可能会拉伸 UIViewContentModeScaleToFill 将图片拉伸至填充整个imageView 图片显示的尺寸跟imageView ...
- Redis 存储字符串和对象
今天用redis存储,发现客户端jedis提供的存储方法中存储的类型只有String和byte数据,没有能够存储对象的,网上发现可以序列化存储对象.这就开始了我第一次序列化之旅. 1 测试类 ...
- Asp.Net 设计模式 之 “工厂方法”即利用 接口 实现的抽象工厂
主要改动部分: /// <summary> /// 6.创建工厂方法模式(抽象工厂:接口) /// </summary> interface IFactory ...
- CentOS 7 配置本地yum 源
1. 加载 CentOS的ISO镜像并挂载: [root@localhost files]# mount /media/files/CentOS-7-x86_64-DVD-1611.iso /mnt/ ...