js 轮播图（透明度）

用透明度的方式来实现轮播图

先说下思路，我们首先应该考虑下页面的结构。
第一，我们在做网站的时候，不可能一个页面都是轮播图，所以我们首先需要一个大的盒子，来把轮播图包起来，这里我用的是div
第二，因为使用透明度做的，所以轮播图的切换方式也是透明度，也就是说一个隐藏，一个显示，那么也就意味着，这些用来做轮播图的图片是在同一个位置上，一个压着一个的。这个效果可以用position：absolute来实现，这些图片需要一个共同的祖先来设置position：relative，所以我用的是ul>li>a>img
第三，怎么样让图片逐个显示，首先我们可以先将图片全部隐藏，然后在逐个显示，需要注意层级的问题，这个问题可以用z-index解决
最后，剩下的小点和前进、后退，可以直接用定位，定到上方。

然后，我们来考虑下思路

我们需要创建一个选中样式，选中样式的作用就是，将图片显示出来。

然后在js中要做的就是首先定义一个函数，这个函数的功能是，我们往里面传递图片的索引，函数根据索引，找到对应的元素，将选中样式赋值给他

其他的效果，就是参数的不同了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}ul {list-style: none;}div {width: 500px;height: 313px;border: 1px solid black;position: relative;}.carousel li {position: absolute;left: 0;top: 0;opacity: 0;transition: opacity .3s;//切换图片时的过度效果}.carousel li a img {width: 500px;height: 313px;}.carousel .selection {//显示的图片需要的类opacity: 1;z-index: 10;}.prev,.next {//左右箭头的样式width: 50px;height: 50px;font-size: 30px;text-align: center;line-height: 50px;background: white;opacity: .3;position: absolute;top: 50%;transform: translateY(-50%);z-index: 101;cursor: pointer;user-select: none;}.prev:hover,.next:hover {opacity: .8;}.prev {left: 20px;}.next {right: 20px}.circle {position: absolute;height: 8px;left: 50%;transform: translateX(-50%);z-index: 200;bottom: 20px;}.circle li {width: 12px;height: 12px;border-radius: 50%;background: rgba(180, 180, 180, .3);border: 1px solid transparent;float: left;margin-left: 10px;cursor: pointer;}.circle .current {//选中小点的样式background: rgba(180, 180, 180, .8);border: 1px solid rgb(50, 50, 50);}
</style><body><div><ul class="carousel"><li class="selection"><a href="#1"><img src="1.jpg" alt=""></a></li><li><a href="#2"><img src="2.jpg" alt=""></a></li><li><a href="#3"><img src="3.jpg" alt=""></a></li><li><a href="#4"><img src="4.jpg" alt=""></a></li><li><a href="#5"><img src="5.jpg" alt=""></a></li></ul><div class="prev">< </div> //左箭头<div class="next">></div>//右箭头<ul class="circle">//全部的小点<li class="current"></li>//小点<li></li><li></li><li></li><li></li></ul></div><script>var currentIndex = 0;//当前图片的索引，我希望从0开始var id;var len = document.querySelector('.carousel').childElementCount;//得到ul下面li的个数function carousel(index) {//建一个函数，用来提供一个索引然后切换到索引对应的图片if (currentIndex === len) //判断一下，当前图片索引是否等于li的个数，因为当前索引是从0开始的，所以总数的值是没有的currentIndex = index = 0}if (currentIndex < 0) {currentIndex = index = 4}document.querySelector('.current').className = '';//将页面上有选中样式的小点的样式清空document.querySelector('.circle li:nth-child(' + (index + 1) + ')').className = 'current'//根据索引来控制那个小点是显示状态document.querySelector('.selection').className = '';//将页面上有选中样式的图片的样式清空document.querySelector('.carousel li:nth-child(' + (index + 1) + ')').className = 'selection'//根据索引来控制那张图片显示}function prev() {//后退函数currentIndex--;//当前索引减1carousel(currentIndex) //调用carousel函数}function next() {//前进函数currentIndex++;//当前索引加1carousel(currentIndex) //调用carousel函数}var lis = document.querySelectorAll('.circle li');//得到页面上的所有小点for (var i = 0; i < lis.length; i++) {//for循环遍历lis[i].index = i;//将i值先保存一下lis[i].onclick = function () {//currentIndex = this.indexcarousel(currentIndex);}}function auto() {//自动切换id = setInterval(next, 1000)//间隔函数，每一秒调用一次前进函数}function stop() {clearInterval(id)}auto();document.querySelector('.prev').onclick = prev//后退按钮的点击事件document.querySelector('.next').onclick = next//前进按钮的点击事件document.querySelector('div').onmouseover = stop//div的鼠标移入事件document.querySelector('div').onmouseout = auto//div的鼠标移出事件</script>
</body></html>

js 轮播图（透明度）相关推荐

JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
html 轮播切图,JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图效果图: 思路通过编写过渡动画实现轮播效果,图片的出现 ...

js 轮播图（透明度）

js 轮播图（透明度）

js 轮播图（透明度）相关推荐

最新文章

热门文章