前言

一名刚刚入坑前端的小白，如有错误还望指出，谢谢您的查阅

提示：以下是本篇文章正文内容，下面案例可供参考

轮播图案例（仅供参考）


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;margin: 100px auto;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="第一张图片地址" alt="" /></div><div class="slider-footer"><p></p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script src="./min-max.js"></script><script>//  初始数据const data = ['此对象用于存放数据：如此案例储存的有背景图片、背景颜色、文字',{ url: '图片路径1', title: '文字内容1', color: '颜色1' },{ url: '图片路径2', title: '文字内容2', color: '颜色2' }]// 定义一个全局变量let i = 0// 获取需要对象const img = document.querySelector('.slider-wrapper img')const bgc = document.querySelector('.slider-footer')const title = document.querySelector('.slider-footer p')const next = document.querySelector('.toggle .next')const prev = document.querySelector('.toggle .prev')//  因为下方多次重复这段代码，所以可以将其封装成函数直接调用function render() {const obj = data[i]img.src = obj.urlbgc.style.backgroundColor = obj.colortitle.innerHTML = obj.title//  删除上一个小 li 的高亮效果的类  达到下一个 高亮 上一个取消的效果document.querySelector(`.slider-indicator li.active`).classList.remove('active')//  新增一个 高亮效果的类document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//  注册一个点击事件next.addEventListener('click',function(){//  点击一下  自增一下  达到点击切换下一张的效果i++//  当 i 循环到最后一张图片的时候，给 i 赋值为 0 跳转到第一张 if (i > (data.length - 1)) i = 0//  调用函数render()})prev.addEventListener('click',function(){//  点击一下  自减一下  达到点击切换上一张的效果i--//  当 i 循环到第一张图片的时候，给 i 赋值为 最大的下标值 跳转到第最后一张 if (i < 0) i = data.length - 1//  调用函数render()})//  开启定时器let id = setInterval(function() {//  调用点击切换下一张图片的方法next.click()},1000)//  获取最大盒子的对象  来做当鼠标移动到盒子里面的时候轮播图自动停止  鼠标移开自动切换const slider = document.querySelector('.slider')//  注册一个鼠标进过的事件slider.addEventListener('mouseover',function(){//  定时器关闭   （达到轮播图停止切换的效果）clearInterval(id)})//  注册一个鼠标离开时的事件slider.addEventListener('mouseout',function(){clearInterval(id)//  开启定时器id = setInterval(function(){//  调用点击切换下一张的图片next.click()},1000)})</script>
</body></html>

JavaScript 轮播图案例相关推荐

swiper4.0（移动端）轮播图 - 案例篇
swiper4.0(移动端)轮播图 - 案例篇官方演示地址:异形的slide · 点击前往查看 banner 效果图: 代码: <!DOCTYPE html> <html lang ...
axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...
JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
阶段二网页搭建入门之javaScript与前端案例 javaScript轮播图
加粗样式## 效果图图片素材 html <!doctype html> <html lang="en"> <head><meta cha ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
使用jQuery完成无缝轮播图案例
前言: 一.前面给大家讲了关于css的一些有趣的小案例,这一期来给大家介绍下jQuery,jQuery的使用相比较js的使用比较简单,因为jQuery会自动给你生成循环函数,使代码简洁,相比较js实现 ...
JavaScript轮播图（面向对象）
步骤轮播图1 HTML+CSS 轮播图2 动态生成页面通过 JavaScript程序生成 div标签中所有轮播图需要的标签生成 ul ol div 标签节点根据数组动态生成原始 ul& ...
js 移动端网页特效+移动端轮播图案例+移动端常用开发插件的使用
触屏事件常见触屏事件: 触屏touch事件说明 touchstart 手指触摸到DOM元素时触发 touchmove 手指在DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触 ...

JavaScript 轮播图案例

前言

轮播图案例（仅供参考）

JavaScript 轮播图案例相关推荐

最新文章

热门文章