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

实现逻辑：将所有要轮播的图片全部定位到一起，即一层一层摞起来，并且利用层级的属性调整正确的图片顺序，将图片的透明度全部设置为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. Idea下用SBT搭建Spark Helloworld

    没用过IDEA工具,听说跟Eclipse差不多,sbt在Idea其实就等于maven在Eclipse.Spark运行在JVM中,所以要在Idea下运行spark,就先要安装JDK 1.8+ 然后加入S ...

  2. mono for android学习过程系列教程(5)

    这一讲主要需要了解的安卓UI元素是Spinner.这个元素类似我们 winform和webform里面的下拉选项. 首先我们先建立一个新的项目,命名为SpinnerExample. 然后在Layout ...

  3. Python 黑帽编程大纲（变化中）

    Python 黑帽编程大纲(预览版) 教程说明: 本系列教程,采用的大纲母本为<Understanding Network Hacks Attack and Defense with Pytho ...

  4. 一种简单,轻量,灵活的C#对象转Json对象的方案

    简单,是因为只有一个类 轻量,是因为整个类代码只有300行 灵活,是因为扩展方式只需要继承重写某个方法即可 补充:修正无法处理可空值类型的bug 首先我将这个类称之为JsonBuilder,我希望它以 ...

  5. es6 新特性2

    es6其他几个非常有用的新特性. import export 这两个家伙对应的就是es6自己的module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成 ...

  6. JavaScript随笔6

    Ajax:(1) 阻止缓存?+t = new data(); eval可以把string变为数组(2) get:放入URL username = &password = ; 容量有小 安全性差 ...

  7. jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗

    一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...

  8. 以实际的WebGIS例子探讨Nginx的简单配置

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 以实际项目中的一个例子来详细讲解Nginx中的一般配置,其中涉 ...

  9. Unity3D中常用的数据结构总结与分析

    来到周末,小匹夫终于有精力和时间来更新下博客了.前段时间小匹夫读过一份代码,对其中各种数据结构灵活的使用赞不绝口,同时也大大激发了小匹夫对各种数据结构进行梳理和总结的欲望.正好最近也拜读了若干大神的文 ...

  10. ASP.NET Core 中文文档 第二章 指南（5） 在 Nano Server 上运行ASP.NET Core

    原文 ASP.NET Core on Nano Server 作者 Sourabh Shirhatti 翻译 娄宇(Lyrics) 校对 刘怡(AlexLEWIS).许登洋(Seay).谢炀(kile ...