JavaScript实现轮播图（隔3秒显示一张图）

最新推荐文章于 2023-06-14 14:56:13 发布
最新推荐文章于 2023-06-14 14:56:13 发布
阅读量1.3k 收藏 2
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Jones-dd/p/7499680.html
版权

<!DOCTYPE html>
<html>
<head>
<script>
var time;
function init(){
//获取div里面的东西
time=setInterval("show()",3000);
setInterval("show1()",3000);
}
var num=1;
function show1(){
if(num>3){
num=1;
}
var imageObj=document.getElementById("divshow1");
imageObj.src="img/"+ num++ +".jpg";
}
function show(){
var divshow = document.getElementById("divshow");
divshow.style.display="none";
clearInterval(time);
time =setInterval("hidden()",3000)
}
function hidden(){
var divshow=document.getElementById("divshow");
divshow.style.display="block";
clearInterval(time);
time =setInterval("show()",1000)
}


</script>
</head>

<body οnlοad="init()">
<div id="divshow" style="width: 99%; display: block;"><img src="img/1.jpg" width="100%" id="divshow1"/></div>
</body>
</html>

转载于:https://www.cnblogs.com/Jones-dd/p/7499680.html

denggan8282
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现图片轮播共3页.pdf.zip
11-22
javascript实现图片轮播共3页.pdf.zip
JavaScript表单校验
mqingo的博客
11-11 922
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
JavaScript（二）——轮播图
LeeBlog
06-04 234
轮播图自动播放 需求: 有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换 技术分析: 每隔三秒钟切换图片 步骤分析: 1. 确定事件: 文档加载完成的事件 onload 2. 事件要触发 : init() 3. 函数里面要做一些事情:(通常会去操作元素,提供交互) 1. 开启定时器:...
使用jQuery来实现淘宝首页轮播图的效果
baipangtu的博客
07-19 1766
一.实现这一效果最主要的几个要求点 轮播图的五张图片要求每隔3秒自动轮播一次 当鼠标移入时，轮播效果会停止，当鼠标移出时又会继续轮换播放 图片的两侧会有两个方向按钮，当点击按钮时图片会随之对应的方向切换 轮播图的下方会有五个白点，代表五张图片；当图片切换时对应的白点会随之亮起，当点击白点时也会切换到对应的图片 实现了这五个要求也就能实现淘宝首页轮播图的效果了。 好了下面直接上代码，里边会有一些注释： 1.首先是设置图片、箭头、小白点等元素 <div c.
轮播图（html+JS实现）
Amanda_wr的博客
03-31 645
作为一名前端初学者，最近疯狂的爱上写网页，今天又根据新学到的知识做了一个轮播图。本案例是利用html+js实现一个轮播图，即当打开网页时，每三秒会切换一张图片，共三张图片，循环的进行。 案例分析： 1.在页面上使用img标签展示图片 2.定义一个方法，修改图片对象的src属性 3.定义一个定时器，每隔三秒调用方法一次。 代码如下：...
用js实现轮播图
qq_41485882的博客
09-07 767
用js实现轮播图 案例说明：用js实现在指定位置的图片中，图片每隔3秒会自动换另外一张图片，到了最后一张会自动跳到第一张，从头来过 分析： 第一步:先确定事件（onload()） 第二步：把事件绑定一个函数 第三步：在函数里面用写一个按照指定周期实现的函数， 第四步：在指定周期函数里面，获取到指定图片的id, 第五步：修改指定图片的src值 用到的js函数： 用到的js函数：用到...
详解JavaScript实现动态的轮播图效果
10-17
主要介绍了JavaScript实现动态的轮播图效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端JavaScript实现轮播图效果
04-11
使用HTML+CSS+JavaScript实现轮播图效果，可以自动切换，有完整的点击事件。所有代码都有详细注释，适合初学者参考。
JQuery 实现轮播图（一）
分享我的点点滴滴，在成长路上与你同行！
09-08 322
要求： 1、每隔3秒换一张图片，循环播放； 2、鼠标悬停上显示图片，时钟停止；离开鼠标，时钟启动； 3、单击左边或右边显示图片，时钟不停止； HTML页面 <body> <!--焦点图--> <div class="banner"> <div class="my"> <!--图片--> <ul class="slide_box "> <li clas...
实现轮播图效果
qq_14815199的博客
05-03 1924
该文档实现的效果如下： 1. 轮播图获得焦点时，显示左右箭头，并停止轮播图自动播放 2. 实现点击左右箭头时，轮播图自动向左或向右，并且小圆点跟随运动 3. 点击小圆点时，图片切换到对应的图片 4. 自动轮播，每2s一次
js实现多张图片每隔一秒切换一张图片
12-12
本文实例为大家分享了js实现多张图片每隔一秒切换图片的具体代码，供大家参考，具体内容如下 <head> <meta charset="UTF-8"> <title></title> [removed][removed] </head> <body style="background-color: pink"> <div id="carousel" style="border:1px solid #000000; float:left; width
原生js 之 轮播图 （多功能）
最新发布
qq_53165476的博客
06-14 480
1）右侧按钮点击，变量++，如果大于等于最后一张，则复原0。4）处理图片自动复原从头播放 (放到变量++后面，紧挨)2）左侧按钮点击，变量--，如果小于0，则复原最后一张。1）准备一个数组对象，里面包含详细信息 (素材包含)2）底部盒子背景颜色和文字内容会变换。3）小圆点随机一个高亮显示。3）鼠标经过暂停定时器。4）鼠标离开开启定时器。
js实现自动轮播效果【两种方式】
qq_57218855的博客
09-02 3892
js图片动画效果
微信小程序实现轮播图，三秒后跳转，显示点。
谷咕咕
03-20 2033
微信小程序实现轮播图，三后跳转，显示点。 轮播图代码： <view> <swiper style='height:500rpx' autoplay="auto" interval="3000" duration="500" indicator-dots="true"> <swiper-item> <image src='/images/core/ks.p...
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 917
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js小案例-轮播图（定时器）
Ass12454548的博客
02-03 1708
找几张你喜欢的图片.新建一个HTML页面.给一个div把img放进去加上第一张图片.在div元素的下面新建一个script标签添加效果:这里因为我们要做轮播图，所以我们用定时器定义一个定时器：每1s切换一张图片，一共四张图片,在定时器内声明函数,这里需要定义一个变量 index用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 index自增，这里做一个判断当 index 自增到4时，让 index 等于0，这样就可以一直不停地变化下去，达到轮播的效果。
html中图片间隔几秒自动播放,案例15-自动播放轮播图-用延迟器setInterval
weixin_28339527的博客
05-31 843
html>Document*{margin:0;padding:0;}a{text-decoration:none;}.wrap{width:1000px;height:800px;background:url(img/bg.jpg)no-repeat;position:absolute;left:50%;top:50%;margin-left:-500px;margi...
【JavaScript】Js定时器综合应用大全
热门推荐
【敦厚的曹操】的专栏
10-05 2万+
JavaScript(Jquery)中让网页停顿几秒或按时间循环执行（定时器，已解决，可直接执行！） function date_1() { alert('打开网页只执行一次过程函数！'); } function date_2() { alert('每隔3秒循环执行过程函数！'); } // s
javascript实现图片轮播
06-07
可以通过以下代码实现Javascript图片轮播： HTML: ```html <div id="slider"> <img class="sliderImg" src="img1.jpg"> <img class="sliderImg" src="img2.jpg"> <img class="sliderImg" src="img3.jpg"> </div> ``` CSS: ```css #slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .sliderImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .sliderImg.active { opacity: 1; } ``` Javascript: ```javascript var sliderIndex = 0; var sliderImages = document.querySelectorAll(".sliderImg"); var sliderInterval = setInterval(nextSlide, 3000); function nextSlide() { sliderIndex++; if (sliderIndex >= sliderImages.length) { sliderIndex = 0; } for (var i = 0; i < sliderImages.length; i++) { sliderImages[i].classList.remove("active"); } sliderImages[sliderIndex].classList.add("active"); } ``` 首先，我们在HTML中定义了一个包含三张图片的div，每张图片都有一个类名为“sliderImg”。 接下来，我们在CSS中设置了“slider” div的宽度、高度和overflow属性，并将每张图片的position设置为absolute，top和left设置为0，以便它们都居中并重叠在一起。我们还为每张图片设置了一个opacity属性，以便在切换图片时进行渐变效果。 最后，在Javascript中，我们定义了一个sliderIndex变量，它将跟踪我们当前显示的图片。我们还定义了一个sliderImages变量，它是一个包含所有图片元素的数组。我们使用setInterval函数设置一个间隔时间，以便每隔3秒调用nextSlide函数。在nextSlide函数中，我们将sliderIndex增加1，以便显示下一张图片。如果sliderIndex的值大于或等于图片数量，我们将其重置为0。我们使用一个循环来删除所有图片的“active”类，并将其添加到当前显示的图片。这将触发我们在CSS中定义的渐变效果，并显示新的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值