一个简单的banner

绝地灬酷狼 2022-09-23 04:51 133阅读 0赞

源码：

<html>  
<head>  
<title>一个简单banner</title>  
<style>  
\*\{margin:0;padding:0;\}  
.banner\{height:200px;width:200px;height:120px;background-size:cover;margin:100px 0 0 200px;\}  
li\{float:left;\}  
.right\{margin-top:-180px;margin-left:352px;height:120px;width:50px;cursor:pointer;\}  
.left\{margin-top:-180px;margin-left:0px;height:120px;width:50px;cursor:pointer;\}  
img\{width:400px;height:300px;\}  
</style>  
</head>  
<body>  
<div class="banner">  
<img src="images/01.jpg" id="pc"/>  
<img type="button" src="images/right.jpg" class="right" οnclick="r\_change()" />  
<img src="images/left.jpg" class="left" οnclick="l\_change()" />  
</div>  
<script type="text/javascript">  
var index = 1;  
window.οnlοad=function()\{  
var p = document.getElementById("pc");  
p.src="images/01.jpg";  
\}  
  
  
//左切换  
function r\_change()\{  
var p = document.getElementById("pc");  
index++;  
var x = index % 6;  
if(x == 0)\{   
index = 1;  
\}  
else\{  
index = x;  
\}  
p.src="images/0"+index+".jpg";  
\}  
  
//右切换  
function l\_change()\{  
var p = document.getElementById("pc");  
index--;  
var x = index % 6;  
if(x == 0)\{   
index = 5;  
\}  
else\{  
index = x;  
\}  
p.src="images/0"+index+".jpg";  
\}  
</script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 Banner的自定义

Banner 1.简介 SpringBoot Logo 以及版本信息：$\{spring-boot.version\} 、$\{spring-boot.for

ゝ一世哀愁。/ 2024年04月08日 11:26/ 0 赞/ 77 阅读

相关 banner.txt

利用banner.txt可以输出系统的配置信息 ![在这里插入图片描述][2020082514094566.png_pic_center] banner.txt

柔光的暖阳◎/ 2022年12月01日 01:18/ 0 赞/ 176 阅读

相关怎样实现banner自动播放html,jquery实现简单的banner轮播效果【实例】

朋友给我看了一个轮播效果，把js下载一看，丫丫的一个这么简单的效果，这么的就能写个几百行的，严重影响浏览器加载速度嘛，以为人家宽带流量不要钱玩的哦。。无奈之下给他写了个简单的，

水深无声/ 2022年10月05日 09:58/ 0 赞/ 145 阅读

相关怎样实现banner自动播放html,HTML+CSS实现简单banner轮播（推荐PC端）

PC端banner如果没有跳转页面的要求，可以使用这个方法来实现简单展示banner的需求，减少页面的体积，浏览页面更加快速。 1.先写两个div,把需要轮播的图片放进去

﹏ヽ暗。殇╰゛Y/ 2022年10月05日 09:58/ 0 赞/ 297 阅读

相关一个简单的banner

源码： <html> <head> <title>一个简单banner</title> <style> \\{margin:0;padding:0;\}

绝地灬酷狼/ 2022年09月23日 04:51/ 0 赞/ 134 阅读

相关 Banner欣赏

![uisdc-banner-20161230-0.webp][] 1. 构图构图是一个banner设计中最基础的部分，在做banner排版的时候，首先要根据bann

小咪咪/ 2022年06月18日 05:10/ 0 赞/ 212 阅读

相关打造一个轻量级,简单,易用的Android Banner框架

打造一个轻量级,简单,易用的Android Banner框架由于本人在写一个项目(项目地址: [https://github.com/xfhy/Daily][https

亦凉/ 2022年06月07日 07:47/ 0 赞/ 367 阅读

相关 Banner框架的简单使用（实现轮播图）

[\[-\]][-] 1. [效果展示][Link 1] 2. [使用步骤][Link 2] 1. [Step 1依赖banner Gradle de

ゝ一纸荒年。/ 2022年06月07日 07:07/ 0 赞/ 372 阅读

相关修改SSH的banner

看过包子的改OpenSSH的banner的文章后，也想把自己的ssh改了，由于OpenSSH漏洞相对来说比较多，我习惯用www.ssh.com的SSH，比较安全也比较正宗，呵呵

约定不等于承诺〃/ 2022年03月20日 13:48/ 0 赞/ 395 阅读

相关 Banner图的播放

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com] 1.效果图 ![watermark_type_ZmF

ゝ一纸荒年。/ 2021年09月27日 08:32/ 0 赞/ 300 阅读