JS实现轮播图(一看就懂逻辑清晰)

简介: JS实现轮播图(一看就懂逻辑清晰)

轮播图有很多种实现方法,这是其中一种最清晰的方法。思路很清晰,代码很简单,欢迎大佬多指教。

先来看下效果图,嫌麻烦就不用具体图片来实现了,主要是理清思路。(自动轮播,左右按钮切换图片,小圆点切换图片,鼠标移入暂停轮播,鼠标移出继续轮播

HTML

首先是html内容,布局很简单,一个图片列表,一个点列表,两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据(下面JS代码会提到)。记得给默认显示的图片和对应的小圆点加上active类哦。

<div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
        </ul>
        <button class="btn" id="leftBtn"> < </button> 
        <button class="btn" id="rightBtn"> > </button>
    </div>

 

 

CSS

思路:父容器list相对定位,item绝对定位,实现让所有图片重叠在父容器内。利用z-index来设置图片高度,图片高度最高会显示在顶层上。那么整个容器中,左右切换按钮和小圆点始终要在最顶层,不能被图片覆盖,所以他们的z-index一定要比图片高。active是一个样式,给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果,opacity完全不透明到透明,再加个transition动画效果。最后就是cursor给小圆点添加“小手指”,其他就没什么好说的了。

<style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }
        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1) {
            background-color: skyblue;
        }
        .item:nth-child(2) {
            background-color: yellowgreen;
        }
        .item:nth-child(3) {
            background-color: rebeccapurple;
        }
        .item:nth-child(4) {
            background-color: pink;
        }
        .item:nth-child(5) {
            background-color: orange;
        }
        .item.active {
            z-index: 10;
            opacity: 1;
        }
        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
        }
        #leftBtn {
            left: 0px;
        }
        #rightBtn {
            right: 0px;
        }
        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }
        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer;  
        }
        .point.active{
            background-color: cadetblue;
        }
    </style>

Javascript

Index可以说是整个代码里面的"核心",先封装一个清除active的方法,这里面要清除图片的active(显示在最上层),比如切换到下一张图上张图的active就要清除。还有point的active(图片对应小圆点改变样式)。然后goIndex这个方法就是给图片和对应的小圆点同时加上active,左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性,绑定图片index = pointindex,就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了,就可以实现图片切换小圆点跟随变化的效果。

<script>
        var items = document.querySelectorAll(".item");//图片节点
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        //封装一个清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }
        //改变active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }
        //右按钮事件
        var goRight = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        //绑定点击事件监听
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//计时器跳转清零
        })
        right.addEventListener('click', function () {
            goRight();
            time = 0;//计时器跳转清零
        })
        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器轮播效果
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除计时器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
        all.onmouseleave = function(){
            play();
        }
    </script>

 

相关文章
|
18天前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
19 7
|
2月前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片,并通过点击下方的点(`span`标签)切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码,以及图片的展示和轮播图的效果图。
js轮播图练习
|
23天前
|
JavaScript 前端开发
js轮播图有左右箭头和小点
js轮播图有左右箭头和小点
30 1
|
3月前
|
数据采集 JavaScript 前端开发
通过ClearScript V8在.NET中执行复杂JavaScript逻辑
爬虫技术是数据采集的关键手段。针对动态加载的网页,传统HTTP请求及HTML解析难以满足需求。本文章介绍如何利用ClearScript V8库在.NET环境中执行复杂的JavaScript逻辑,以提高爬虫对动态内容的抓取效率。文章首先概述了ClearScript V8的功能,如何处理如微博这类含有大量动态加载内容的网站。通过使用代理IP、设置cookie和user-agent等方式模拟真实用户访问,确保了爬虫的稳定性和隐蔽性。提供了一个具体的C#爬虫示例,演示如何结合ClearScript V8和HTTP客户端来实现上述功能。这种方法不仅增强爬虫的灵活性,也极大地提高数据采集的效率和可靠性。
通过ClearScript V8在.NET中执行复杂JavaScript逻辑
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
JavaScript
js轮播图制作
js轮播图制作
33 1
|
3月前
|
JavaScript
js轮播图功能
js轮播图功能
18 0
|
3月前
|
前端开发 JavaScript
如何使用JavaScript制作轮播图
如何使用JavaScript制作轮播图
21 0
|
3月前
|
JavaScript
js之简单轮播图
js之简单轮播图
36 0
|
3月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?