轮播图

最新推荐文章于 2021-06-04 10:02:58 发布
最新推荐文章于 2021-06-04 10:02:58 发布
阅读量219 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueruitao/article/details/69396552
版权

 

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<title>图片轮播</title>


<script type="text/javascript">

j = 0;
function show(){
for(ii = 1; ii < 6; ii++) {
//display = "none" 只能显示一张图片
document.getElementById("pic" + ii).style.display = "none";
// document.getElementById("Submit" + ii).style.backgroundColor = '';
}
j++;
if(j == 6) {
j = 1;
}
document.getElementById("pic" + j).style.display = "block";
// document.getElementById("Submit" + j).style.backgroundColor = 'blue';
//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
//提示: 1000 毫秒 = 1 秒.
a = setTimeout('show()', 1500);
}


function pic(pic) {
// clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
// clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
clearTimeout(a);
for(var i = 1; i <= 5; i++) {
if(i == pic) {
document.getElementById("pic" + pic).style.display = "block";
// document.getElementById("Submit" + pic).style.backgroundColor = 'blue';
j = i;
} else {
document.getElementById("pic" + i).style.display = "none";
// document.getElementById("Submit" + i).style.backgroundColor = '';
}
}


a = setTimeout('show()', 1500);
}
</script>
<style type="text/css">
input {
background-color: lawngreen;
border: #FF0000 border: 0px;
margin: 0px;
padding: 0px;
height: 20px;
width: 20px;
font-size: 14px;

}
</style>
</head>


<body onLoad="show()">
<table width="400" height="163">
<tr>
<td width="426" rowspan="7">
<img id="pic1" style="display:none" src="img/1.jpg">
<img id="pic2" style="display:none" src="img/2.jpg">
<img id="pic3" style="display:none" src="img/3.jpg">
<img id="pic4" style="display:none" src="img/4.jpg">
<img id="pic5" style="display:none" src="img/5.jpg">
</td>
<td height="15"> </td>
</tr>
<tr>
<td><input type="button" name="Submit1" value="1" onClick="pic('1')"></td>
</tr>
<tr>
<td><input type="button" name="Submit2" value="2" onClick="pic('2')" /></td>
</tr>
<tr>
<td><input type="button" name="Submit3" value="3" onClick="pic('3')" /></td>
</tr>
<tr>
<td><input type="button" name="Submit4" value="4" onClick="pic('4')" /></td>
</tr>
<tr>
<td><input type="button" name="Submit5" value="5" onClick="pic('5')" /></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
</table>
</body>


</html>

蚂蚁小草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
淘宝五轮播代码（风格漂亮）带12345少见的版本
09-20
直接能用的好代码，代码在下载文件里，是一个.txt的文件，载开直接能用，图片地址自己改一下就好了。
简单的轮播图
weixin_30802171的博客
10-28 51
简单的轮播图 效果图，如下 ： //这只是部分javascript 代码 ，以此类推 （代码可优化） <script> var q = 0; window.onload = function (){ qq(); } // 计时器函数 function time(){ q++; timer = se...
Js原生轮播图
xsgg1234的博客
07-27 186
<!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-...
同时显示（两个、三个、四个...）等以上的轮播图
有一种信仰叫海阔天空
03-19 6194
话不多说，先上代码 <div class="main-product1 clearBoth"> <div class="layui-container"> <!-- 轮播图 --> <div class="overflowHidden gameBanner"> ...
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
css轮播图片百叶窗切换
12-29
在网页设计中，动态效果的使用可以极大地提升用户体验，其中轮播图（Slider）是一种常见的展示方式，它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中的一种独特设计，它模拟了百叶窗...
IOS轮播图合集（视频+图片）
02-16
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
H5实现图片轮播
G_JD1234的博客
08-14 3381
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> onload = function() { count = 0; imgo...
超简单全面的html图片自动轮播
热门推荐
a1424715994的博客
12-25 14万+
超简单全面的html图片自动轮播 废话不多说，直接上代码 html部分 <div id="max"> <div class="re"> <ul> <li><img src="./pic/big_size/p1.jpg" alt=""></li> ...
html------轮播图
bulbboy的博客
07-12 3万+
  1.先分块并加入图片 2.用ul和li标签实现轮播图中的小圆点 float:left;  让li标签横着排列 list-style:none;  去除小圆点 border-radius:10px;  圆形边框 line-height:2px; text-align:center;   左右上下居中 3.将小圆点移动到图片的右下角 需要用到绝对定位（absolute）...
html 图片轮播实例,简单实现轮播图效果的实例
weixin_35840528的博客
06-04 4573
一、要点：1.页面加载时，图片重合，叠在一起[绝对定位];2.第一张显示，其它隐藏;3.设置下标,给下标设置颜色让它随图片移动;4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;二、实现代码：html代码:轮播图<>123456css代码：* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {positi...
html语言图片切换,html中图片上有1234的小方框以及动态切换图片的方法
weixin_29331115的博客
06-01 451
我有这个代码===varswf_width=1100varswf_height=437varconfig='5|0x5c5c5c|0x595959|0|0xffffff|0xc0c0c0|0x000000'//config设置分别为:自动播放时间(秒)|文字颜色|文字背景色|文字背景透明度|按键数字色|当前按键色|普通按键色varfiles='../images/111.gif|.....
用js写图片轮播效果
lzz_1234的博客
04-04 3194
用js写图片轮播效果 轮播效果有两种，位移轮播（位移又分为上下和左右）和渐变轮播。 1、先分析页面结构（两种轮播方式都可以用着一个结构） （1）由两部分组成，一个是轮播所用的图片，另一个是图片右下方的小圆点。 （2）用什么标签，层级结构是什么？当然这个界面比较简单先用一个大的div将图片和圆点都装起来，在用一个ul将图片装起来，圆点用span标签。 这样结构就写好了，再将图片放进去。（当然也可以...
使用javascript实现轮播图效果(onload页面加载事件和定时函数setinterval())
ginger_mr的博客
03-02 823
使用javascript实现轮播图效果 技术分析 获取元素document.getElementById(“id名称”); 事件(onload)这是一个页面加载函数,点击该页面就就会加载该函数。 setInterval()函数 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval(...
轮播图图片切换背景根据图片颜色渐变怎么弄
最新发布
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分： ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分： ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中，通过CSS设置了轮播图容器的样式以及背景渐变效果。JavaScript部分实现了切换轮播图的逻辑，并使用setInterval函数定时调用changeSlide函数来切换图片。每次切换图片时，会为当前显示的图片添加active类，从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码，来适应你的项目需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值