使用JavaScript制作出好看的轮播图效果

准备材料

1.图片若干张（包括轮播图和按钮的图片）



1.jpg



2.jpg



3.jpg



4.jpg



1.png



2.png



3.png



4.png



a1.png



a2.png

2.将按钮的图片应用到按钮上的CSS样式文件

我取名为b1-2a1-4.css，其中b1和b2是左右选择的按钮，a1-4是跳转到1到4中的一张图的按钮。

.b1 {

	width: 62px;

	height: 94px;

	background: url(image/a1.png);

	position: absolute;

	top: 200px;

	left: 7px;

}

.b2 {

	width: 62px;

	height: 94px;

	background: url(image/a2.png);

	float: left;

	position: absolute;

	top: 200px;

	left: 677px;

}

.a1 {

	width: 29px;

	height: 29px;

	background: url(image/1.png);

	position: absolute;

	top: 420px;

	left: 600px;

}

.a2 {

	width: 29px;

	height: 29px;

	background: url(image/2.png);

	position: absolute;

	top: 420px;

	left: 630px;

}

.a3 {

	width: 29px;

	height: 29px;

	background: url(image/3.png);

	position: absolute;

	top: 420px;

	left: 660px;

}

.a4 {

	width: 29px;

	height: 29px;

	background: url(image/4.png);

	position: absolute;

	top: 420px;

	left: 690px;

}

3.实现轮播和点击跳转的JavaScript代码

  1. 其中用一个变量i的余数来判断当前是第几张图片。
  2. 通过changeImg函数来控制图片的切换。
  3. 有一个2秒的计时器，每2秒i值加1。
  4. b3是100ms执行一次，检测i值是否改变，并调用changeImg函数来切换图片。
  5. b1和b2是左右切换，a1-a4是任意切换，他们除了要完成相应的切换（i++/i--/i=400/401/...）之外，还要调用changeImg函数，最后要重置一下2秒自动轮播的定时器。
  6. 这个文件的名字，嗯，就是b1-3a1-4.js
var i = 400;

var img = document.getElementById("img1");

var timeID;

timeID = setInterval("i++", 2000);

function changeImg(i) {

	var imgs;

	if(i % 4 == 0) {

		imgs = "image/1.jpg";

	} else if(i % 4 == 1) {

		imgs = "image/2.jpg";

	} else if(i % 4 == 2) {

		imgs = "image/3.jpg";

	} else {

		imgs = "image/4.jpg";

	}

	return imgs;

}

function b1() {

	i--;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function b2() {

	i++;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function a1() {

	i = 400;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function a2() {

	i = 401;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function a3() {

	i = 402;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function a4() {

	i = 403;

	var img = document.getElementById("img1");

	img.src = changeImg(i);

	clearInterval(timeID);

	timeID = setInterval("i++", 2000);

}

function b3() {

	var img = document.getElementById("img1");

	img.src = changeImg(i);

}

setInterval("b3()", 100);

4.用html将他们联系起来！

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="b1-2a1-4.css" />

		<script src="b1-3a1-4.js" type="text/javascript"></script>

	</head>

	<body>

		<img src="image/1.jpg" id="img1"/>

		<input type="button" class="b1" onclick="b1()"/>

		<input type="button" class="b2" onclick="b2()"/>

		<input type="button" class="a1" onclick="a1()"/>

		<input type="button" class="a2" onclick="a2()"/>

		<input type="button" class="a3" onclick="a3()"/>

		<input type="button" class="a4" onclick="a4()"/>

	</body>

</html>

完工！（这其实是之前做的，拿来凑数233333）话说我真的觉得挺好看的做的~

使用JavaScript制作一个好看的轮播图的更多相关文章

  1. swiper实现一个好看的轮播图

    轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件.今天忽然间看到了swiper上一个高颜值的轮播功能,顺便做一下分享. 首先页面在head内要先引用 swiper的css 和 ...

  2. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  3. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. CSS-用伪元素制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  6. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  7. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  8. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  9. JavaScript面向对象的方式开发轮播图插件

    轮播图是很多页面必不可少的组件.这里来使用面向对象方式开发一个插件.减去开发的痛楚 首先需要寻找对象:只有一个对象,轮播图!关键点在于找到这个对象所拥有的属性以及方法,通过代码实现出来,这是面向对象最 ...

随机推荐

  1. iOS开发——常见BUG——window决定程序的状态栏管理问题

    Xcode7升级之后遇到的问题   问题一: 老项目在Xcode6上运行没有任何问题,但在Xcode7上运行直接崩了! 经过一波分析: 发现是因为我顶部状态栏处添加了topWindow,用于处理Tab ...

  2. qemu常见选项解析

    1 -hda file -hdb file.-hdc file.-hdd file 把文件当成hard disk 0.hard disk 1.hard disk 2和hard disk 3. 2 -a ...

  3. Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法

    检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...

  4. HDU 5371(2015多校7)-Hotaru&#39;s problem(Manacher算法求回文串)

    题目地址:HDU 5371 题意:给你一个具有n个元素的整数序列,问你是否存在这样一个子序列.该子序列分为三部分,第一部分与第三部分同样,第一部分与第二部分对称.假设存在求最长的符合这样的条件的序列. ...

  5. Java 技术体系（JDK 与 JRE 的关系）、POJO 与 JavaBeans

    Java 技术体系的分层结构(不同的颜色表示不同的层次),尤其注意 JDK 与 JRE 之间的包含关系: 图见 Java Platform Standard Edition 7 Documentati ...

  6. 4.9 Parser Generators

    4.9 Parser Generators This section shows how a parser generator can be used to facilitate the constr ...

  7. [POI2012]FES-Festival

    https://www.zybuluo.com/ysner/note/1252538 题面 有一个数列\(\{a\}\).现给定多组限制,限制分成\(2\)类,第一类是\(a_x+1=a_y\),有\ ...

  8. bzoj 1755: [Usaco2005 qua]Bank Interest【模拟】

    原来强行转int可以避免四舍五入啊 #include<iostream> #include<cstdio> using namespace std; int r,y; doub ...

  9. P4727 [HNOI2009]图的同构记数

    传送门 如果我们把选出子图看成选出边,进而看成对边黑白染色,那么就是上一题的弱化版了,直接复制过来然后令\(m=2\)即可 不过直接交上去会T,于是加了几发大力优化 不知为何华丽的被小号抢了rank2 ...

  10. c++ isdigit函数

    函数名:isdigit 函数所需头文件:#include<cstdio> 函数格式:isdigit(字符) 函数作用:判断括号内是否为1~9的数字. 例:isdigit(4) 就是true ...