js原声代码 轮播图
js轮播图
html部分:建立div,内嵌img标签,可以设置大小,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="untitled1.js"></script>
</head> <body>
<div id="quyu" style="width: 1000px;height: 500px;background: #3BE3C6;margin: 0 auto" >
<img id="im" onMouseOver="stop()" onMouseOut="start()" src="../../1.jpg" alt="" height="500px" width="1000px">
</div>
<center> <button onClick="before()">上一页</button>
<button class="butt" onClick="xx(0)" style="color: red;">1</button>
<button class="butt" onClick="xx(1)">2</button>
<button class="butt" onClick="xx(2)">3</button>
<button class="butt" onClick="xx(3)">4</button>
<button onClick="next()">下一页</button> </center> </body>
</html>
js部分
设置全局变量,表示图片地址数组的下标
轮播功能,设置定时器,定时替换图片地址
鼠标移入,定时器停止
鼠标移出,再次设置定时器
上一页,全局变量减1
下一页,全局变量加1
// JavaScript Document
var n = 0; //图片下标
var imDom = null; //图片
var imPath = ["../../1.jpg", "../../2.jpg", "../../3.jpg", "../../4.jpg"];//图片位置
var intervalobj = null;//定时器
var btnDom = null;//数字按钮
window.onload = function () {
imDom = document.getElementById("im");
btnDom = document.getElementsByClassName("butt");
intervalobj = setInterval(function () {
lunbo();
}, 3000);
}
/*功能:图片轮播*/
function lunbo() {
n++;
if (n >= imPath.length) {
n = 0;
}
imDom.src = imPath[n];
for (var i = 0; i < btnDom.length; i++) {
btnDom[i].style.color = "black";
}
btnDom[n].style.color = "red";
} /*鼠标移入,轮播停止*/
function stop() {
clearInterval(intervalobj);
}
/*鼠标移入 轮播继续*/
function start() {
intervalobj = setInterval(function () {
lunbo(n);
n++;
if (n >= imPath.length) {
n = 0;
}
}, 3000);
}
/*图片进入上一页*/
function before() {
n--;
if (n <=-1) {
n = imPath.length-1;
}
imDom.src = imPath[n];
for (var i = 0; i < btnDom.length; i++) {
btnDom[i].style.color = "black";
}
btnDom[n].style.color = "red";
}
/*图片进入下一页*/
function next() {
n++;
if (n >= imPath.length) {
n = 0;
}
imDom.src = imPath[n];
for (var i = 0; i < btnDom.length; i++) {
btnDom[i].style.color = "black";
}
btnDom[n].style.color = "red";
}
/*点击数字按钮,跳转到相应图片*/
function xx(a) {
imDom.src = imPath[a];
}
js原声代码 轮播图的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js 自适应手机电脑 轮播图
自己写了一个javascript的可循环轮播图,支持手机滑动,不过代码着实小白,全局变量,函数调用满天飞,研究别的代码规范好的轮播图插件,表示看得懂但是写不出.. HTML: <div id=& ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
随机推荐
- [源码解析]Oozie来龙去脉之提交任务
[源码解析]Oozie来龙去脉之提交任务 0x00 摘要 Oozie是由Cloudera公司贡献给Apache的基于工作流引擎的开源框架,是Hadoop平台的开源的工作流调度引擎,用来管理Hadoop ...
- 看完这篇 HashSet,跟面试官扯皮没问题了
我是风筝,公众号「古时的风筝」,一个兼具深度与广度的程序员鼓励师,一个本打算写诗却写起了代码的田园码农! 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在 ...
- Spring 获取单例流程(三)
读完这篇文章你将会收获到 Spring 何时将 bean 加入到第三级缓存和第一级缓存中 Spring 何时回调各种 Aware 接口.BeanPostProcessor .InitializingB ...
- 四. django template模版
往前端浏览器pull一些字符串,这些字符串是一些数据, 那如果想让这些数据按我们的某种格式美化一点/增加样式/图片,就需要用到django提供的模版--模版就是为了让数据看起更美观. 加载模版 dja ...
- Swoole 中 TCP、UDP 和长连接、短连接
TCP 服务 swoole 文档 - TCP 服务 tcp 服务端 <?php // 1. 创建 swoole 默认创建的是一个同步的阻塞tcp服务 $host = "0.0.0.0& ...
- 别逃避,是时候来给JVM一记重锤了
今天是猿灯塔“365天原创计划”第2天. 今天讲: 为什么写这个主题呢? 之前看到不少同学在讨论, 今天呢火星哥抽出点时间来帮大家整理一下关于JVM的一些知识点 一.JVM是什 ...
- JavaScript动画实例:递归分形图动态展示
在“JavaScript图形实例:SierPinski三角形” 和“JavaScript图形实例:Levy曲线及其变形”等文章中我们介绍了通过递归生成分形图形的方法.我们可以将绘制的分形图形每隔一定的 ...
- CSS/CSS3常用的样式兼容,样式总结
这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用.包括了‘单行缩略号‘.’css圆角兼容'.‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘cs ...
- P1220 关路灯——区间dp
P1220 关路灯 题目描述 某一村庄在一条路线上安装了 \(n\) 盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一 ...
- NOI 2003 逃学的小孩 (树的直径)
[NOI2003 逃学的小孩] 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一 ...