使用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. 2016/1/21 练习 创建 接口interface 应用implements 类class 并实例化调用

    package testinterface; public interface ICpu { //电压 public boolean dianya(); //控制 public void kongzh ...

  2. PHP cURL使用小结

    cURL简介 cURL是什么? cURL(Client URL Library Functions)由 Daniel Stenberg 创建的libcurl库,官方定义为:curl is a comm ...

  3. Chrome教程之NetWork面板分析网络请求

    官方文档:https://developers.google.com/web/tools/chrome-devtools/network/ 最近打算写一写Chrome教程文档,不知道大家最感兴趣的是什 ...

  4. WPF-CheckBox(复选框、功能开关)美化

    老规矩,先放图 按钮美化背景: 由于特殊需求,复选框样式单一,所以我们需要将其按钮重构和美化达到我们的需求 复选框美化思维引导: 图中1为背景色 图中2为边框 图中3为句柄控件组成(Path+Rect ...

  5. 【原创】Eclipse实现图形化界面插件-vs4e

    vs4e插件下载地址:http://visualswing4eclipse.googlecode.com/files/vs4e_0.9.12.I20090527-2200.zip 下载完成后,解压,然 ...

  6. tp5增加验证的自定义规则

  7. [POI2013]POL-Polarization

    题目描述 Everyone knew it would only be a matter of time. So what? Faced for years on, a peril becomes t ...

  8. 题解报告:poj 1321 棋盘问题(dfs)

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  9. Spring MVC过滤器-HiddenHttpMethodFilter

    参考来源:http://blog.csdn.net/geloin/article/details/7444321 浏览器form表单只支持GET与POST请求,而DELETE.PUT等method并不 ...

  10. 石墨烯(转自wiki)

    石墨烯(Graphene)是一种由碳原子以sp2杂化轨道组成六角型呈蜂巢晶格的平面薄膜,只有一个碳原子厚度的二维材料[1].石墨烯一直被认为是假设性的结构,无法单独稳定存在[1],直至2004年,英国 ...