原生js实现点击轮播切换图片
(编辑:jimmy 日期: 2024/12/25 浏览:3 次 )
本文实例为大家分享了js实现点击轮播切换图片的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击轮播图</title> </head> <style> .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 40%; bottom:20px; z-index: 2; } .container .buttons span { margin-left: 10px; display: inline-block; width: 7px; height: 7px; background-color: #D4D4D4; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: #558949; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } </style> <body> <div class="container"> <div class="wrap" style="left:-600px;"> <img alt=""> <img src="/UploadFiles/2021-04-02/jd_app3.png">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:node.js中process进程的概念和child_process子进程模块的使用方法示例