实现简单轮播器

た入场券 2022-09-24 00:21 191阅读 0赞

HTML:

<DOCTTYPE!>  
<html>  
<head>  
<meta charset='utf-8'>  
<script src="index.js" type="text/javaScript"></script>  
<link href="index.css" type="text/css" rel="stylesheet">  
</head>  
<body>  
<div id='box'>  
<img src='images/0.jpg' alt='促销' id='image0'>  
<img src='images/1.jpg' alt='促销' id='image1'>  
<img src='images/2.jpg' alt='促销' id='image2'>  
<img src='images/3.jpg' alt='促销' id='image3'>  
</div>  
<div id='click'>  
  
<img src = 'images/4.jpg' alt='点击' id='click2'>  
</div>  
</body>  
</html>

CSS:

\*\{  
margin: 0;  
padding: 0;  
\}  
\#image0,\#image1,\#image2,\#image3\{  
position: absolute;  
top: 0;  
left: 0;  
\}  
\#click\{  
position: absolute;  
top: 240px;  
left: 490px;  
\}  
\#image0\{  
opacity: 1;  
\}  
\#image1\{  
opacity: 0;  
\}  
\#image2\{  
opacity: 0;  
\}  
\#image3\{  
opacity: 0;  
\}  
\#click2\{  
cursor: pointer;  
\}

JavaScript：

window.onload = function()\{  
shoudong(4);  
zidong(4);  
\}  
  
  
//手动轮播器 imgNum：轮播器中图片的数量  
function shoudong(imgNum)\{  
var click1 = document.getElementById('click1');  
var box = document.getElementById('box');  
var child = box.children;  
var num = 1;  
click2.onclick = function()\{  
if(num == imgNum)\{  
num = 0;  
\}  
if(num == 0)\{  
child\[imgNum-1\].style.opacity = 0;  
\}else\{  
child\[num-1\].style.opacity = 0;  
\}  
child\[num\].style.opacity = 1;  
num++;  
\}  
\}  
  
//自动轮播器 imgNum：轮播器中图片的数量  
var timer = null;  
function zidong(imgNum)\{  
var click1 = document.getElementById('click1');  
var box = document.getElementById('box');  
var child = box.children;  
var num = 1;  
timer = setInterval(function()\{  
if(num == imgNum)\{  
num = 0;  
\}  
if(num == 0)\{  
child\[imgNum-1\].style.opacity = 0;  
\}else\{  
child\[num-1\].style.opacity = 0;  
\}  
child\[num\].style.opacity = 1;  
num++;  
\},1000);  
\}

发表评论取消回复

表情：

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

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

相关阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 398 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 326 阅读

相关实现简单轮播器

HTML: <DOCTTYPE!> <html> <head> <meta charset='utf-8'> <script src="index.js" t

た入场券/ 2022年09月24日 00:21/ 0 赞/ 192 阅读

相关用ajax实现轮播器,jQuery实现简单的轮播图

先看效果，如果是你想要的，可以看看 ![d3719bc5e552d342a6da8a41ace054f9.gif][] 总体思路： 1.自动轮播 2.指定轮播 3.左

客官°小女子只卖身不卖艺/ 2022年09月03日 11:16/ 0 赞/ 186 阅读

相关 javascript实现简单轮播器

html代码： <DOCTTYPE!> <html> <head> <meta charset='utf-8'> <script src="index

柔光的暖阳◎/ 2022年07月16日 01:52/ 0 赞/ 167 阅读

相关简单图片轮播器的实现

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume

迷南。/ 2022年07月14日 13:26/ 0 赞/ 223 阅读

相关简单轮播的实现

简单轮播的实现 1、适配器：BannerAdapter 【 public class BannerAdapter extends PagerAdapter \{

╰半橙微兮°/ 2022年06月17日 23:10/ 0 赞/ 187 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 271 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 677 阅读

相关轮播图简单实现

如何实现轮播图？根据视频[尚硅谷JavaScript视频][JavaScript]整理得到。思路： ![在这里插入图片描述][2019082110244071

Bertha 。/ 2021年10月24日 05:26/ 0 赞/ 513 阅读