纯JavaScript手写图片轮播代码

废话不多说了，直接给大家贴js代码实现手写图片轮播的代码了，代码非常简单，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
　　.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
　　.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
　　.numStyle{top: 0px;}
　　.textStyle{bottom: 0px;}
　　.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
　　.imgCon .prev{left: 10px;}
　　.imgCon .next{left: 370px;}
　　img{width:400px;height: 400px;}
</style>
</head>
<body>
　　<div class="imgCon">
　　　　<span id="numCon" class="numStyle">加载中...</span>
　　　　<span id="textCon" class="textStyle">加载中...</span>
　　　　<strong id="prev" class="prev"><</strong>
　　　　<strong id="next" class="next">></strong>
　　　　<img src="" id="imgChange"/>
　　</div>
　　<script type="text/javascript">
　　　　var numCon = document.getElementById('numCon');
　　　　var textCon = document.getElementById('textCon');
　　　　var prev = document.getElementById('prev');
　　　　var next = document.getElementById('next');
　　　　var imgChange = document.getElementById('imgChange');
　　　　var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];
　　　　var imgText = ['第一张','第二张','第三张','第四张'];
　　　　var num = 0;
　　　　//数字 图片变化函数
　　　　function imgTab(){
　　　　　　numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化
　　　　　　textCon.innerHTML = imgText[num]; //底部文字内容变化
　　　　　　imgChange.src = imgArr[num]; //图片变化
　　　　}
　　　　imgTab();
　　　　//下一张 按钮
　　　　next.onclick = function(){
　　　　num++;
　　　　if(num == imgArr.length){
　　　　　　num = 0;
　　　　}
　　　　imgTab();
　　　　}
　　　　//上一张 按钮
　　　　prev.onclick = function(){
　　　　　　num--;
　　　　if(num == -1){
　　　　　　num = imgArr.length-1;
　　　　}
　　　　imgTab();
　　　　}
　　</script>
</body>
</html>

以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 图解js图片轮播效果

    图解js图片轮播效果

    本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下 两种图片轮播实现方案,先来看效果对比: 方案一: 原理:将图片摆成一行,从左到右依次滚动进入视野,当滚动到最后一张时,从右到左滚动回到第一张.这么做的缺点是,滚动到最后一张时,会有一个反向,导致整个滚动过程不连贯. 方案二: 实现原理示意图 原理: 1.轮播过程中,有几个关键元素:一个舞台(绿框).候场区(黑框).排队区(红框)和两个数组A和B.A用来保存正在展示和下一个将要展示的图片,如:图片1.2:B用来保存排队等

  • 最简单的JavaScript图片轮播代码(两种方法)

    最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • 用JS实现图片轮播效果代码（一）

    用JS实现图片轮播效果代码（一）

    一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

  • 详解js图片轮播效果实现原理

    本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex

  • 基于javascript数组实现图片轮播

    图片轮播的办法有多种,在这里介绍一种简单的:js数组实现. 首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片 <script type="text/javascript"> var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.png"; arr[1] = "2.png"; arr[2] = "

  • js图片轮播手动切换效果

    js图片轮播手动切换效果

    利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

  • Javascript实现图片轮播效果(一)让图片跳动起来

    Javascript实现图片轮播效果(一)让图片跳动起来

    图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • 原生JS实现旋转木马式图片轮播插件

    原生JS实现旋转木马式图片轮播插件

    本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

  • 纯JavaScript手写图片轮播代码

    废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

  • JavaScript图片轮播代码分享

    为大家分享的JavaScript图片轮播代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • javascript实现图片轮播代码

    javascript图片轮播代码,供大家参考,具体内容如下 因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button> <img height="500px" width=&q

  • Vue手写横向轮播图的实例

    Vue手写横向轮播图的实例

    目录 Vue手写横向轮播图 Vue常见的轮播图 Vue手写横向轮播图 前提:自己封装的轮播图,暂时没测出bug~ 效果如下图,一行三个,点击上一张/下一张 向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template> <div class="swiper-template"> <div class="my-swiper-page"> <div class="page-left"> <

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

  • JavaScript实现首页图片轮播图效果

    JavaScript实现首页图片轮播图效果

    目录 一.轮番图 二.源码展示 设置body 样式设置 实现轮番 一.轮番图 效果展示: 轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片.这些图片统称为轮播图,这个模块叫做轮播模块. 二.源码展示 设置body <body> <div class="m-view"> <div class="slide" style="left: -800px"> <img src="1

  • js实现自动图片轮播代码

    本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 192px; height: 120px; border: 1px solid gray; margi

  • JQuery悬停控制图片轮播——代码简单

    JQuery悬停控制图片轮播——代码简单

    jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现,下面小编给大家分析jq悬停控制图片轮播,请看小面的效果图. 在线预览          源码下载 具体实现的代码如下: <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides&qu

  • JavaScript实现简单图片轮播效果

    JavaScript实现简单图片轮播效果

    本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图 代码块 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: non

随机推荐