轮播图随机版
需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式
分析:①:准备一个数组对象,里面包含详细信息(素材包含)
②:随机选择一个数字,选出数组对应的对象,更换图片,底部盒子背景颜色,以及文字内容
③:利用这个随机数字,让小圆点添加高亮的类(addClass)利用css结构伪类选择器
CSS部分不予显示
//1.初始数据
const sliderData=[
{url:'./images/slider02.jpg',title:'开启剑与雪的黑暗传说!',color:'rgb(43,35,26)'},
{url:'./images/slider03.jpg',title:'真正的jo厨出现了!',color:'rgb(36,31,33)'},
{u服务器托管网rl:'./images/slider05.jpg',title:'快来分享你的寒假日常吧',color:'rgb(67,90,92)'},
{url:'./images/slider06.jpg',title:'哔哩哔哩小年YEAH',color:'rgb(166, 131,143)'},
{url:'./images/slider07.jpg',title:'一站式解决你的电脑配置问题!!!',color:'rgb(53,29,25)'},
{ur1:'./images/slider08.jpg',title:'谁不想和小猫咪贴贴呢!',color:'rgb(99,72,114)'},
]
//1.需要一个随机数
const random = parseInt(Math.random()*sliderData.length)
//console.Log(sliderDatarandom)
//2把对应的数据染到标签里面
//2.1获取图片
const img=document.querySelector('.slider-wrapper img')
//2.2,修改图片路径=对象.urL
img.src = sliderData[random].url
// 3.把p里面的文字内容更换
// 3.1获取p
const p = document.querySelector('.slider-footer p')
// 3.2修改p
p.in服务器托管网nerHTML = sliderData[random].title
// 4.修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundcolor =slideerData[random].color//行内样式表是高于内部样式表,所以可以后来更改来覆盖以前的style=""
// 5.小圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random +1})`)
//让当前这个小It添加active这个类
li.classList.add('active')
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 【开源】SpringBoot框架开发海南旅游景点推荐系统
目录 一、摘要 1.1 项目介绍 1.2 项目录屏 二、功能模块 2.1 用户端 2.2 管理员端 三、系统展示 四、核心代码 4.1 随机景点推荐 4.2 景点评价 4.3 协同推荐算法 4.4 网站登录 4.5 查询景点美食 五、免责说明 一、摘要 1.1…