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 样式,并 ...
随机推荐
- spring入门笔记-(一)、spring boot HelloWorld
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- iOS开发之邮件发送代码
邮件发送功能是由MessageUI Framework提供的,这个框架是iPhone sdk中最简单的框.由一个类.一个视图控制器,一个protocol组成. 一.创建视图控制器: MFMailCom ...
- [转]linux之date命令MYSQL用户管理
转自:http://www.cnblogs.com/hencehong/archive/2013/03/19/mysql_user.html 一. 用户登录 格式: mysql -h主机 ...
- ssm基础配置
1.导包 <dependencies> <dependency> <groupId>org.springframework</groupId> < ...
- git 学习笔记1
目前我属于粗放型的[学习者],接下来需要做一些改变,让自己更加规范.首先需要学习的就是版本控制系统,本科在工作室的时候使用过一点Subversion,不过到现在已经基本没有印象了.git现在越来越成为 ...
- WPF知识点--自定义Button(ControlTemplate控件模板)
ControlTemplate是一种控件模板,可以通过它自定义一个模板来替换掉控件的默认模板以便打造个性化的控件. ControlTemplate包含两个重要的属性:VisualTree 该模板的视觉 ...
- faster rcnn结构
rpn-data层输入的是data即整张图片,然后是根据映射生成roi框 rpn-loss-bbox输入的才是整个网络预测的roi框 bbox_transform在rpn-data层使用,把生成的ac ...
- 【经验】停止Smart Card服务
Windows+R键调出运行 输入 services.msc 有一项Smart Card的服务找到他->属性->启动类型(设置为禁用 )->确定,然后重新启动服务
- java线程池 多线程 搜索包含关键字的文件路径
package org.jimmy.searchfile20180807.main; public class ThreadMain implements Runnable{ private int ...
- 【C语言】控制台窗口图形界面编程（六）：光标设置
目录 00. 目录 01. CONSOLE_CURSOR_INFO结构 02. GetConsoleCursorInfo函数 03. SetConsoleCursorInfo函数 04. SetCon ...