前面有分享过改变层级的轮播图算法，今天继续利用透明度来实现无位移的轮播图算法。

实现逻辑：将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为0，然后在让初始的第一张图片的透明度为1即可，具体算法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变透明度算法(经典)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: 2s;
}
.wrap img:nth-child(1) {
position: relative;
}
.wrap .follow {
width: 150px;
height: 30px;
margin: auto;
display: flex;
justify-content: space-between;
}
.wrap .follow span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid gray;
}
.wrap .follow span:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
<input id="leftBut" type="button" name="name" value="◀︎">
<input id="rightBut" type="button" name="name" value="▶︎">
<div class="follow">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script type="text/javascript">
// 获取所需元素
var images = document.querySelectorAll('.wrap img');
var spans = document.querySelectorAll('.follow span');
var leftBut = document.getElementById('leftBut');
var rightBut = document.getElementById('rightBut');
// 定义有参函数
function showImage(index) {
for (var i = 0; i < images.length; i++) {
spans[i].index = i;//自定义属性，得到对应的下标
images[i].index = i;//自定义属性，得到对应的下标
images[i].style.zIndex = 100 - i;//为图片排列顺序
images[i].style.opacity = '0';//将图片透明度全部赋值为0
spans[i].style.background = 'gray';//圆点北京色全部设置为黑色
}
//将传入参数下标值的图片透明度赋值为 1
images[index].style.opacity = '1';
//将传入参数下标值的图片的背景色赋值为white
spans[index].style.background = 'white';
}
showImage(0);//初始设置下标为0的图片和圆点的样式

var count = 1;//获取计数器
// 定义自动轮播函数
function imageMove() {
// 判断count的值如果能被4整除，则将count重新赋值为0；
if (count % 4 == 0) {
count = 0;
}
// 将count值当做参数传给函数showImage();
showImage(count);
count++;//执行一次 ＋1
}
// 设置两秒调用一次函数imageMove()，并且赋值给imageInitailMove
var imageInitailMove = setInterval('imageMove()', 2000);
// 向左点击事件
leftBut.onclick = function() {
// 先清除定时器
clearInterval(imageInitailMove);
// 由于和自动轮方向相反所以要判断count的值当值为0时，重新赋值为4，继续循环
if (count == 0) {
count = 4;
}
count--;
showImage(count);//调用函数count先自－
imageInitailMove = setInterval('imageMove()', 2000);
}
// 向右的点击事件
rightBut.onclick = function() {
clearInterval(imageInitailMove);
imageMove();//由于和自动轮播的方向相同所以直接调用
// 重新为定时器赋值
imageInitailMove = setInterval('imageMove()', 2000);
}
// 圆点的点击事件
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
clearInterval(imageInitailMove);
// 将当前点击的圆点的下标值赋值给count
count = event.target.index;
// 调用函数
showImage(count);
imageInitailMove = setInterval('imageMove()', 2000);
}
}
</script>
</html>

js基础(改变透明度实现轮播图的算法)的更多相关文章

  1. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  2. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  3. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  4. JS应用实例2：轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

  5. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

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

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

  7. 基于js的自适应、多样式轮播图插件（兼容IE8+、FF、chrome等主流浏览器）

    插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...

  8. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  9. 纯js实现淘宝商城轮播图

    需求: 循环无缝自动轮播3张图片,点击左右箭头可以手动切换图片,鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片.鼠标放到轮播图的图片上时不再自动轮播,鼠标移开之后又继续轮播.效果图: 下面是htm ...

随机推荐

  1. docker4dotnet #2 容器化主机

    .NET 猿自从认识了小鲸鱼,感觉功力大增.上篇<docker4dotnet #1 前世今生&世界你好>中给大家介绍了如何在Windows上面配置Docker for Window ...

  2. 排序算法----调用库函数qsort进行快速排序

    功 能: 快速排序 头文件:stdlib.h 用 法: void qsort(void *base,int nelem,int width,int (*fcmp)(const void *,const ...

  3. 绿色版的Linux.NET——“Jws.Mono”

    Linux.NET环境的搭建,不仅是一项比较耗时的事情,同时也是一项略显复杂繁琐的事情.特别是对于近期的几个Mono版本,由于官方所提供的源码包中出现代码文件的缺失,这总让我们的付出变得徒劳.另外一方 ...

  4. 用ProGet搭建内部的NuGet服务器

    最近团队内部用的一个很简陋的NuGet服务器出问题了,nuget push发包,客户端显示发布成功,服务器上就是没有.懶得再去排查这个问题,早就想换掉这个过于简陋的NuGet服务器,借此机会直接弃旧迎 ...

  5. 微软Visual Studio Code 0.8.0发布，新增多种主题

    月30日,Build 开发者大会上,正式宣布了 Visual Studio Code 项目;并将其定义为:一个运行于 Mac OS X.Windows和 Linux 之上的,针对于编写现代 Web 和 ...

  6. Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化

    9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...

  7. Contents Of My Blogs

    C++ How To Use Goto? Preprocessing Directive std::array std::deque std::forward_list std::map std::m ...

  8. C#服务器获取客户端IP地址以及归属地探秘

    背景:博主本是一位Windows桌面应用程序开发工程师,对网络通信一知半解.一日老婆逛完某宝,问:"为什么他们知道我的地址呢,他们是怎么获取我的地址的呢?" 顺着这个问题我们的探秘 ...

  9. 【Win10应用开发】签名与验证

    对数据进行签名和验证,是为了防止数据被“盗版”.比较常规的做法是通过公钥进行验证. 算法上多用SAH_xxxx,就是哈希算法.由于MD5后来被发现存在“非唯一性”,你会发现现在很多一些下载的文件验证都 ...

  10. 【译】Unity3D Shader 新手教程(1/6)

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...