WEB前端学习——第六次作业（banner图片左右切换按钮）

使用小米商城首页的banner作为举例

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{position: relative;width: 100%;height: 500px;}.container>img {width: 100%;height: 500px;position: absolute;}.container>img:not(:first-child){display: none;}.prev{background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -84px 50%;position: absolute;top: 50%;width: 41px;height: 69px;margin-top: -35px;outline: none;cursor: pointer;z-index: 10;}.prev:hover{background-color: black;}.next{background: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png) no-repeat -125px 50%;position: absolute;top: 50%;width: 41px;height: 69px;margin-top: -35px;outline: none;cursor: pointer;z-index: 10;right: 0;}.next:hover{background-color: black;}</style><script>window.onload = () =>{var img_arr = document.querySelectorAll(".container > img")var index = 0img_arr[index].style.display = "block";var timer = setInterval(change,3000)function change(){img_arr[index].style.display = "none";index = ++index % img_arr.lengthimg_arr[index].style.display = "block";}var prev = document.getElementsByClassName("prev")prev[0].onclick = function (){img_arr[index].style.display = "none";index = index - 1if(index < 0){index = index + img_arr.length}img_arr[index].style.display = "block";}var next = document.getElementsByClassName("next")next[0].onclick = function (){img_arr[index].style.display = "none";index = ++index % img_arr.lengthimg_arr[index].style.display = "block";}var banner = document.getElementsByClassName("container")[0];banner.onmousemove = function (e) {clearInterval(timer)}banner.onmouseout = function (e) {timer = setInterval(change,3000)}   }</script></head><body><div class="container"><div class="prev"></div><div class="next"></div><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d03df40a5e8ef760731a8f4f3f61172.jpg"/><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c3a918217308ba7341952552675eb89.jpg"/><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12674202e53fd1e46b1725be488d93f5.jpg"/></div></body>
</html>

效果演示：

WEB前端学习——第六次作业（banner图片左右切换按钮）相关推荐

web前端学习基础教程，简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图案例源码: <!DOCTYPE html> <html lang=" ...
Web前端学习第六周
一百一十二.b标签和i标签 strong和em都表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的,而b和i是不具备语义化的. ...
web前端学习（六）：WebRTC实时通信，掌握WebSocket很实用
一.WebRTC前言: 1.什么是WebRTC Web-RTC(Web Real-Time Communication)就是网页实时通信技术,怎么理解这句话呢?在网页中能够打语音电话,直播视频不就是一 ...
web前端学习（六）—— HTML中元素的id属性、div和span布局
一.id属性 1.在HTML文档中,任何元素(节点)都有id属性,id属性是该节点的唯一标识,所以在同一个HTML文档中id值不能重复 2.注意:表单提交数据的时候,只和name有关系,和id无关 ...
Web前端学习笔记（三）---白色/黑暗背景切换
效果图 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
Web前端学习第四周
Web前端学习第四周 position定位指定一个元素在文档中的定位方式 top,right,left,bottom属性决定最终位置 position取值 static(默认) relative a ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
零基础想要学习前端，却无从下手？其实你就差一套这样的web前端学习路线
优秀的前端工程师无论在深度和广度上都得有自己的一套清晰透明的知识体系,同时更应该具备快速学习的能力. WEB前端工程师除了需要掌握基本的前端的开发技能外,当然,这里的基本技能说的比较宽泛,大致包括HT ...

WEB前端学习——第六次作业（banner图片左右切换按钮）

WEB前端学习——第六次作业（banner图片左右切换按钮）

WEB前端学习——第六次作业（banner图片左右切换按钮）相关推荐

最新文章

热门文章