javascript实现简单轮播器

柔光的暖阳◎ 2022-07-16 01:52 166阅读 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 条评论，166人围观）

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

相关阅读

相关 JavaScript简单的实现轮播图

用JavaScript简单的实现轮播图： 1.鼠标不触碰图片时，图片以1.5秒的速度自动播放。 2.鼠标触碰图片时，自动轮播图片停止。 3.鼠标点击1-5时，通过下标跳转

我就是我/ 2023年01月16日 11:29/ 0 赞/ 129 阅读

相关 Html图片轮播遍历,javaScript 简单轮播图实现

Document .crousel \{ width:1500px; height: 500px; margin: auto; position: relative

比眉伴天荒/ 2022年10月09日 05:54/ 0 赞/ 213 阅读

相关简单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 赞/ 191 阅读

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

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

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

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

目前许多的javascript框架都带有图片轮播的功能，但是我们也应该知道如何用单纯的javascript代码来实现属于我们自己的轮播程序。那么，如果你是新手并且

╰半夏微凉°/ 2022年08月07日 01:59/ 0 赞/ 173 阅读

相关 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 阅读

相关 JavaScript实现HTML轮播，简单有效

先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，

Myth丶恋晨/ 2022年05月15日 01:54/ 0 赞/ 150 阅读

相关 JavaScript实现网页轮播，简单有效

![1240][] 先说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。轮播呈现方式多种多样，鄙人在这里给出

分手后的思念是犯贱/ 2022年03月25日 19:50/ 0 赞/ 168 阅读