轮播图的javascript写法

最新推荐文章于 2023-04-30 10:56:20 发布
最新推荐文章于 2023-04-30 10:56:20 发布
阅读量812 收藏
点赞数
文章标签： javascript 轮播图 网页轮播图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcm1457225624/article/details/52577542
版权



<!----大家好，我是小张，本次将为大家讲解一下轮播图在Javascript中的实现，希望对大家有所帮助。--->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>轮播图</title>

<style>

*{

margin:0;

padding:0;

}

ul{list-style: none;}

#banner{

width: 1000px;

height: 400px;

border:1px solid #ccc;

margin: 50px auto;

position: relative;

}

.img_box{

width:1000px;

height:400px;

}

.img_box img{

width:100%;

height:100%;

display: none;

}

.img_box img.select{

display: block;

}

.num{

position: absolute;

width: 160px;

height:30px;

right:20px;

bottom: 20px;

}

.num li{

float:left;

width:20px;

height:20px;

margin-right:20px;

background: #ccc;

border-radius: 50%;

}

.num li.select{

background: orange;

}

a{

width: 30px;

height:50px;

background: url(img/pre.png);

position:absolute;

top:50%;

margin-top:-35px;

opacity: 0.4;

}

.banner_right{

right: 0;

background-position:-50px 0;

}

a.select{

opacity: 1;

}


</style>

</head>

<body>

<div id="banner">

<div class="img_box">

<img class="select" src="img/banner1.jpg" alt="" />

<img src="img/banner2.jpg" alt="" />

<img src="img/banner3.jpg" alt="" />

<img src="img/banner4.jpg" alt="" />

</div>

<ul class="num">

<li class="select"></li>

<li></li>

<li></li>

<li></li>

</ul>

<a href="javascript:;" class="banner_left"></a>

<a href="javascript:;" class="banner_right"></a>

</div>

</body>

<script>

var oBanner=document.getElementById("banner");

var aImgs=document.getElementsByTagName("img");

var aLis=document.getElementsByTagName("li");

var bannerRight=document.getElementsByClassName("banner_right")[0];

console.log(bannerRight)

var bannerLeft=document.getElementsByClassName("banner_left")[0];

function change(n){

for(var i=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis[n].className="select";

aImgs[n].className="select";

}

var step=0;

for(var i=0;i<aLis.length;i++){

aLis[i].index=i;

aLis[i].onclick=function(){

change(this.index);

step=this.index;

}

}bannerRight.onclick=function(){

}

function change(n){

for(var i=0;i<aLis.length;i++){

aLis[i].className="";

aImgs[i].className="";

}

aLis[n].className="select";

aImgs[n].className="select";

}

var step=0;

//选项点击

for(var i=0;i<aLis.length;i++){

aLis[i].index=i;

aLis[i].onclick=function(){

change(this.index);

step=this.index;

}

}

//右点击

bannerRight.onclick=fn;

function fn(){

console.log("hah")

step++;

if(step>3){

step=0;

}

change(step);

}

bannerLeft.onclick=function(){

step--;

if(step<0){

step=3;

}

change(step);

}

var timer=window.setInterval(fn,4000);

oBanner.onmouseover=function(){

window.clearInterval(timer);

bannerLeft.className="banner_left select";

bannerRight.className="banner_right select";

}

oBanner.onmouseout=function(){

timer=window.setInterval(fn,1000);

bannerLeft.className="banner_left";

bannerRight.className="banner_right";

}

</script>

</html>
<!----大家好，我是小张，本次将为大家讲解一下放大器在Javascript中的实现，希望对大家有所帮助。
 放大器在购物网站中很常用，京东，淘宝，都会用到放大器的相关知识，而本次博客将为大家介绍使用javascript编写放大器的例子。
????1996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生Javascript实现轮播图
limingxiaojie的博客
08-17 108
<!DOCTYPE html> <html> <head> <title>myturn</title> <style> *{ margin: 0; padding: 0; } a { text-decoration: none; } .container { width: 60...
JavaScript编写轮播图
cathei的博客
07-11 402
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; #wrap{ width: 500px; height: 300px; ov
轮播图写法详细汇总(原生JS+BootStrap+jQuery)+渐变轮播
大大大鸡腿的博客
07-25 461
轮播图原生JS写法BootStrapjQuery 原生JS写法 轮播图主要包括三个功能： 自动循环播放 点击左右箭头换页 点击小圆相应的图显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
轮播图的三种写法
L123456llljdjdbd的博客
03-09 85
当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；< label> 标签的 for 属性应当与相关元素的 id 属性相同。用来匹配文档(页面)的url的某个标志符的目标元素。标签的作用是为鼠标用户改进了可用性，
css学习：轮播图
m0_56424512的博客
11-29 1908
css学习
轮播图的四种写法-----参考李立超
zsyyugong的博客
04-30 124
写这个，纯粹是为了给日后的自己一个方便。使用说明：准备5张大小一样的图片，放在同一文件夹下，本代码默认是640px ，390px大小的图片。
JavaScript轮播图(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-30 1283
JavaScript轮播图(1+X Web前端开发 例题)
常用轮播图写法汇总
12-24
在网页和应用程序设计中，轮播图是一种常见的展示方式，用于在有限的空间内展示多张图片或内容。本文将深入探讨几种使用JavaScript实现轮播图的常见方法，以供开发者参考。 1. **纯CSS轮播图** CSS3提供了强大的...
网易云轮播图实现完整代码
05-06
在这个轮播图项目中，JavaScript将负责处理图片的切换、过渡动画、定时自动播放等功能。开发者可能会使用数组存储图片的URL，通过计数器控制显示哪一张图片，同时利用CSS3的transition属性实现平滑的过渡效果。 ...
javascript测试题.pdf
04-08
图片切换通常使用`onchange`事件，而非`change`事件，D选项错误。 5. 定时器在JavaScript中用于执行延时或周期性任务，`setInterval`用于周期性执行，`setTimeout`用于一次性延迟执行。正确写法是`setTimeout...
轮播图的写法之一（基本写法）
06-17
使用ViewPager实现轮播图，最基本的写法
轮播图的写法之二（功能全实现）
06-17
/** * 1.实现了轮播图自动滚动效果<br> * 2.设置了跟随页面变化的小点点<br> * 3.解决了轮播图手指滑动后，显示页面错位的问题<br> * 4.实现了手指按住轮播图时，停止自动滚动的效果<br> * 5.实现了点击轮播图，跳转到相关页面的操作<br> */
component-slide:焦点轮播图js组件
07-10
焦点轮播图js组件使用说明开始调用组件，在html页面中写下如下代码：[removed] = function(){var _translate = {content:'slide',//滑动体（所有图片拼接起来的滑动体）prev:'prev',//前进按钮next:'next',//后退...
图片型按钮的写法.rar
07-05
1. 图片切换：通过JS，我们可以实现按钮点击后图片或背景图片的切换，以模拟不同的状态。 ```javascript document.getElementById('imageButton').addEventListener('click', function() { this.style.background...
简单轮播图的写法
u013849242的博客
03-30 1144
今天是学习HTML的第12天，给大家分享一下HTML轮播图的写法（只有页面，还写不了效果呢，不足之处还请小伙伴们多多留言） HTML代码如上图 备注：图片多得话可以多添加一些img标签。 轮播图包含： （1）显示区： 此区域大小只需要按照图片大小写即可，溢出部分我们可以使用“overflow-x:hidden”来隐藏。当然，在后面写按钮我们需要为按钮添加定位，需要在该区域CSS中写相对定位...
js动态轮播图最简单写法
jingtian678的博客
03-13 1487
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;轮播图&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;img src="img/1.jpg" id="myShow&
怎么用原生js写轮播图
攻城狮-张小白的博客
05-16 2367
目前用js原生写轮播图的攻城狮已经很少了，用的都是框架，便捷，速度 但对于初学者来说也是挺重要的，需要了解原生js轮播图的过程， 那么我今天就给大家写一下用原生js写轮播图的步骤 1、首先把需要轮播的图片放到页面 html代码 <div class="all" id='box'> <div class="screen"> <...
JS-案例-三种轮播图写法（一）
Joker.M的博客
06-03 900
第一种 点击右侧小图，对应大图变换类型 DOM构建元素，样式。 初始状态函数 <script> var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"]; var iconArr=["./img/icon_a.jpeg","./...
轮播图javascript
最新发布
05-30
以下是一个简单的轮播图的 JavaScript 代码示例： ```javascript var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值