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 样式,并 ...
随机推荐
- python中字典的陷阱
把字典与列表组合,如 i=20 s=[]#定义一个空列表 b={'d':i}#定义一个字典 while i>0: i=i-1 b['d']=i#更新字典的值 s.append(b) print( ...
- Ghost系统操作记录
1.下载Symantec Ghost应用. 2.下载老毛桃PE工具箱. 3.利用老毛桃PE工具箱制作启动U盘. 4.拷贝Ghost应用至U盘. 5.设置计算机启动顺序为U盘启动. 6.重启计算机进入P ...
- Lena Sort 构造题，很多细节的模拟
https://www.hackerrank.com/contests/101hack46/challenges/lena-sort 把题目转换成一颗二叉树,也就是当前的节点是cur,然后大的,放右边 ...
- 通过 DBCA 工具创建Oracle数据库
DBCA 是 Oracle 提供的一款图形化界面工具,用来帮助数据库管理员快速.直观地创建数据库,避免了繁琐复杂的 SQL命令操作. 使用 DBCA创建数据库的过程如下. (1)依次 单击“开始 ”→ ...
- Heart Beat
实现关键: 1.纯css实现心形图(如果使用图片则无需) html代码: <!DOCTYPE html> <html> <head> <meta charse ...
- Hadoop YARN学习监控JVM和实时监控Ganglia、Ambari（5）
Hadoop YARN学习监控JVM和实时监控Ganglia.Ambari(5) 1.0 监控ResourceManager进程Java虚拟机中堆空间的特定部分. jstat工具,在JDK的bin目录 ...
- Retrofit2.0动态url遇到的坑
1.今天在升级基于RxJava2+Retrofit+RxCache的网络请求封装这套框架的过程中遇到一个问题,当我使用Post动态传入url时,服务器一直返回http404 ,我的请求地址末端是这样的 ...
- Windows 下 IIS与Apache 共存
在Windows服务器下, 安装了IIS以及Apache服务器, 如何使他们一起工作. 目前我面对的问题是, 只有一个IP地址,要通过不同的端口来访问不同的程序. 解决方案如下: 1.找到 Apach ...
- 微信小程序组件解读和分析：十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 如何参与一个GitHub开源项目？
如何参与一个GitHub开源项目? 摘要:本文是Github官如何参与一个GitHub开源项目方给出的参与Github上开源项目的一些指导,对希望加入开源社区的开发者是一个不错的参考. 最近一年开源项 ...