HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src = "lunbotu.js"></script>
<style>
#kuai{
width: 50%;
height: 300px;
margin: auto;
position: relative;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
#kuai img{
width: 100%;
height: 100%;
}
#btn_1{
position: absolute;
top: 50%;
left: 0px;
}
#btn_2{
position: absolute;
top: 50%;
right: 0px;
}
#botBtn{
width: 300px;
height: 25px;
background-color: #ccc;
position: absolute;
bottom: 0px;
left: 30%;
}
.redC{
color: red;
}
</style>
</head>
<body>
<div id="kuai">
<!-- 在页面上显示一张图片 -->
<div id="tupian">
<img onmouseover="qingchudsq()" onmouseout="go_on()" src="data:image/J1.png" alt="">
</div>
<!-- 换行需要一个按钮需要一个按钮，叫下一页 -->
<button onclick="xiayiye()" id="btn_1">下一页</button>
<button onclick="shangyiye()" id="btn_2">上一页</button>
<div id="botBtn">
</div>
</div>
</body>
</html>

JS部分：

var imgObj = null;
// 定义一个数组存放src路径
var imgArrObj = ['image/J1.png','image/J2.png','image/J3.png','image/J4.png'];
var i = 0;//下标
var a = null;
var box = null;

window.onload = function(){
init();//初始化变量
dingshiqi();// 定时器
addBtn();//添加按钮
}
function init(){
imgObj = document.getElementsByTagName('img')[0];
box = document.getElementById('botBtn');
}
//变色
function bianse(){
//找到所有
var btns = box.getElementsByTagName('button');
// 删除class
for (var k = 0; k < btns.length; k++) {
btns[k].removeAttribute('class');
}
btns[i].setAttribute('class','redC');
}
// 下一页
function xiayiye(){
// 替换属性值
// 改变下标
i++;
if (i >= imgArrObj.length ){
i =0;
}
imgObj.setAttribute('src',imgArrObj[i]);
bianse();

}
//上一页
function shangyiye(){
i--;
if (i < 0) {
i = imgArrObj.length - 1;
}
imgObj.setAttribute('src',imgArrObj[i]);
bianse();
}
//定时器
function dingshiqi(){
a = setInterval(function(){
xiayiye();
// i++;
// if (i >= imgArrObj.length ){
// i =0;
// }
// imgObj.setAttribute('src',imgArrObj[i]);
},2000);
}

function addBtn(){
var str = '';
for (var k = 0;k < imgArrObj.length;k++) {
if (k==0) {
str += '<button class="redC" onclick="ch('+k+')">'+ (k+1) +"</button>";
}else{
str += '<button onclick="ch('+k+')">'+ (k+1) +"</button>";
}
}
box.innerHTML = str;
}
function ch(num){
i = num;
imgObj.setAttribute('src',imgArrObj[i]);
bianse();
}
// 清除定时器
function qingchudsq(){
clearInterval(a);
}
function go_on(){
dingshiqi();
}

简易轮播图、内含定时器。熟练JS操作的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  3. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  4. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  5. 轮播图切换 纯html+js+css

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码代码如下: <div class="wrapper"> <div id=&quo ...

  6. vue简易轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JQuery简易轮播图

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. 用CSS代码编写简易轮播图

    废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...

  9. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

随机推荐

  1. spring boot中jsp解析c标签方法

    pro.xml中添加jstl标签 <dependency><groupId>javax.servlet</groupId><artifactId>jst ...

  2. 2019.3.22 JMeter基础操作

    1.添加线程组:testplan—添加—线程(用户)Threads(Users) 线程属性值:线程数(虚拟用户数).Rump-up(准备时长:设置所有线程全部启动时间).循环次数(每个线程重复发送请求 ...

  3. 校园服务nabcd需求分析

    我们的团队是敲啥都队 口号是敲啥都队敲啥都对 1.你的创意解决了用户的什么需求?(N) 我们校园服务1主要为了节省学生所浪费的没必要的时间.当你还是大一新生的时候,你是否对大学的规划一无所知,你是否迷 ...

  4. 实现promise

    // 判断变量否为function  const isFunction = variable => typeof variable === 'function'  // 定义Promise的三种 ...

  5. Tkinter 项目-屏保

    参考教程,以及网上资料,针对小白更好理解 关于tkinter的屏保涉及的知识点和思想 项目分析: 屏保启动方式:手动,自动 敲击键盘或者移动鼠标后,或者其他引发事件,则停止 如果屏保是一幅画的话,则没 ...

  6. centos7 + php7

    安装php7 https://www.zntec.cn/archives/centos7-lamp.html composer安装tp curl -sS https://getcomposer.org ...

  7. com.alibaba.druid.pool.DruidDataSource : {dataSource-2} init error

    这几天准备写一个项目,其中的整合druid的时候,发现出现了下面这个错误.找了好久都没有找到.网上的各种解决方法都不对. 2018-11-07 16:26:28.940 INFO 19684 --- ...

  8. 4.hadoop的安装与配置

    1.下载hadoop-2.6.2.tar.gz. 2.复制hadoop-2.6.2.tar.gz到/usr/local/目录下. 3解压 #tar  -zxvf  hadoop-2.6.2.tar.g ...

  9. Port Channel and VPC

    1.Port Channel 介绍 Port Channel  简介 绑定多个物理链路(最多8条),到一个单一的逻辑链路,在两个物理设备之间 每个物理端口只能被放入一个port-channel中. 在 ...

  10. 温习排序算法（基于C指针）

    以前学过的数据结构课,貌似已经忘得一干二净了,偶然又翻起,书中最后一章详细介绍了7种排序算法,现在对其中4种做个总结.(为啥只总结4种,当然是因为偷懒,只想总结简单又常用的!) 先贴一张排序分类图: ...