这个Banner唯一不好的就是没有前进和后退的button,写过两个版本的banner,这次这个是下面有浮动层的。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="padding: 0; margin: 0;">
<div style="width: 1024px; margin: auto;">
<div id="can" style="width: 820px; height: 421px;">
<img src="img/qingxin_ziran_fengjing-001.jpg" id="img" />
</div>
<div style="position: absolute; left: 500px; top: 420px; opacity: 0.5;">
<input type="radio" id="vary" value="first" name="start" checked="checked" />
<input type="radio" id="very" value="second" name="start" />
<input type="radio" id="vory" value="thrid" name="start" />
<input type="radio" id="vbry" value="fouth" name="start" />
<input type="radio" id="vcry" value="fifth" name="start" />
</div>
</div>
<script>
var index = 0, start;
var img1 = document.getElementById("img");
var imgs = ["img/qingxin_ziran_fengjing-001.jpg", "img/qingxin_ziran_fengjing-005.jpg", "img/qingxin_ziran_fengjing-007.jpg", "img/qingxin_ziran_fengjing-008.jpg", "img/qingxin_ziran_fengjing.jpg"];
var get = function () {
clearInterval(start);
start = setInterval(fun, 5000);
};
var arr = document.getElementsByTagName('input');
for (var i = 0; i < arr.length; i++) {
arr[i].index = i;
arr[i].onmousemove = function () {
clearInterval(start);
this.checked = true;
index = this.index;
img1.src = imgs[index];
};
arr[i].onmouseout = function () {
get();
};
}
function fun() {
index++;
arr[index % 5].checked = true;
img1.src = imgs[index % 5];
}
get();
</script>
</body>
</html>

这个banner是带button的,但没有浮动层。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js"></script>
<title></title>
</head>
<body>
<div>
<input type="button" style="width:20px;height:40px;" onclick="play('<')" value="<" id="div1" />
<input type="button" style="margin-left: 670px;width:20px;height:40px;position:relative;"onclick="play('>')" value=">" id="div2" />
<img id="img1" src="img/timg.jpg" />
</div>

<script>
var index = 0;
function play(val) {
if (val == "<") {
var img1 = document.getElementById("img1");
var imgs = ["img/timg.jpg", "img/timg1.jpg", "img/timg2.jpg", "img/timg3.jpg", "img/timg4.jpg"];
index--;
if (index == -1) {
index = 4;
}
img1.src = imgs[index];
} else {
var img1 = document.getElementById("img1");
var imgs = ["img/timg.jpg", "img/timg1.jpg", "img/timg2.jpg", "img/timg3.jpg", "img/timg4.jpg"];
index++;
if (index == imgs.length) {
index = 0;
}
img1.src = imgs[index];
}
}
setInterval(play, 5000);
</script>

</body>

</html>

javascript之Banner图片焦点轮播的更多相关文章

  1. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  2. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  3. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  4. ViewPager实现图片的轮播

    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的pos ...

  5. 多预览小图焦点轮播插件lrtk

    多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...

  6. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  7. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  8. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  9. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

随机推荐

  1. EF快速入门--直接修改（简要介绍ObjectContext处理机制）

    原博文 http://www.cnblogs.com/fly_dragon/archive/2011/06/05/2073084.html ObjectContext的处理机制 ObjectConte ...

  2. MySQL、DM 行转列及字段去重（Group_Concat()）

    最近在使用数据库迁移适配,由MySQL 库迁移到达梦数据库,其中进行行转列时,MySQL转换达梦sql语法有些问题,特记录. 在MySQL 下有Group_Concat(expr)  ,在达梦及神通数 ...

  3. Python基础（上篇）

    本篇文章主要内容:变量.注释.运算符.关键字.数据类型. 在入手变量之前我们先来看看经典的编程语句 → hello world 在python3中输出到控制台的函数是print() print(&qu ...

  4. 有关em的个人理解

    个人的感觉关键就是在那个font-size,  对于一开始没有设置font-size的可以默认那就是16px  后面的所有的基础都应该是在前面距离他最近的那个font-size的大小作为1em进行设置 ...

  5. AI驱动的超分辨技术落地实践

    近年来,随着深度学习技术的快速发展,基于AI的超分辨技术在图像恢复和图像增强领域呈现出广阔的应用前景,受到了学术界和工业界的关注和重视.但是,在RTC视频领域中,很多AI算法并不能满足实际场景下的应用 ...

  6. Facetoobject_encapsulation

    面向对象程序设计思想 一.思想 处处皆对象. 当提到某一功能时,首先应该想有没有实现该功能的对象,有则调用,没有则创建类.当提到数据时,应该想到属于哪个对象. 1.求1~n的累加和 public cl ...

  7. Windows软件Everything的配置

    Everything配置 Everything是一款Windows下的搜索软件,怎么安装应该不难.这里说一下个人使用的两个习惯. 主要就两点,一个是快捷键,一个是搜索路径 1. 快捷键 配置快捷键,点 ...

  8. 服务器报错"您的主机中的软件中止了一个已建立的连接"

    网上很多的说法都模棱两可,只是说和远程连接有关,这个说的太泛泛了. 我现在遇到的问题是java web出现的, 执行表单提交的时候出现该错误,原因是ajax和表单同时提交导致的, 相信很多朋友用了aj ...

  9. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  10. 使用 C# 9 的records作为强类型ID - JSON序列化

    在本系列的上一篇文章中,我们注意到强类型ID的实体,序列化为 JSON 的时候报错了,就像这样: { "id": { "value": 1 }, "n ...