js轮播图代码_javascript基础(一)——轮播图
javascript基础(一)——轮播图
1、轮播图的实现原理
轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中。然后再将ul标签放进div中,这个div的大小正好可以显示一整张图片,将其他图片使用 overflow:hidden属性来进行隐藏,之后用js代码来操纵ul标签的left属性值,实现图片的轮播。
轮播图的样式搭建
* { margin: 0; padding: 0; } #lun { width: 150px; height: 80px; background-color: #00B601; border: 1px #0000FF solid; overflow: hidden; margin: 0 auto; position: relative;/*子元素开启绝对定位,父元素一般开启相对定位*/ } /*这里开启ul的绝对定位,为了对其的left属性进行修改*/ #img { position: absolute; /* left: -155px; */ } li { list-style: none; float: left;/*设置浮动,使得图片成一行*/ margin-right:5px; } img { width: 150px; height: 80px; } a{ text-decoration: none; float: left;/*因为a标签是内联标签,将其设置浮动即可自动设置成块标签,即可设置大小*/ width: 5px; height: 5px; background-color: red; opacity: 0.5; } a:hover{ background-color: gray; } #daohang { position: absolute; bottom: 5px; }
接下来添加js代码来实现图片点击的时候进行切换,以及图片的自动切换。
js编写过程,首先要获取ul和所有图片以及a标签,我们这里获取ul使用document.getElementById这个方法获取,图片和a标签我们则使用document.getElementsByTagName方法来获取。获取之后,我们为每一个a标签绑定onclick,使点击相应的链接,可以切换到相应的图片,切换的方式是通过改变ul的left值,第一张图片left值是0,将left值减去图片宽度,就可以切换到第二张图片了,其他图片的切换也是这样。将其写入onclick回调函数中,即可实现点击切换图片。
要想实现自动轮播,还需要添加定时器,js定时器是 setInterval,使用定时器,将图片切换的函数放入其中,每隔一定的时间调用,即可实现自动轮播。
但是这样的轮播没有动画效果,想要有动画效果,我们还需要在写一个定时器。这个定时器的作用就是将图片每次切换的过程放慢,使其有动画效果。
下面是具体的js代码
<script type="text/javascript"> window.onload = function(){ //设置图片 var img = document.getElementById("img"); var imgArr = document.getElementsByTagName("img"); img.style.width = 155 * imgArr.length + "px"; //设置导航条居中位置 var dao = document.getElementById("daohang"); var lun = document.getElementById("lun"); dao.style.left = (lun.offsetWidth - dao.offsetWidth)/2 + "px"; //点击超链接切换指定图片 var index = 0; var aArr = document.getElementsByTagName("a"); //设置第一张选中颜色 aArr[index].style.backgroundColor = "gray"; for(var i = 0;i<aArr.length;i++){ //添加标记,对象属性num aArr[i].num = i; aArr[i].onclick = function(){ index = this.num; //img.style.left = (this.num * -155) +"px"; move(img,"left",-155*index,10); //设置选中 setA(); } } //设置选中链接的颜色 function setA(){ if(index >=imgArr.length-1){ index = 0; img.style.left=0; } for(var i=0;i<aArr.length;i++){ aArr[i].style.backgroundColor=""; aArr[index].style.backgroundColor="gray"; } } /* var timer = setInterval(function(){ setA(); img.style.left = (index * -155) +"px"; index++; if(index >=aArr.length) index = 0; },3000); */ //该函数实现图片自动切换 autochange(); function autochange(){ setInterval(function(){ index++; index %=imgArr.length; move(img,"left",-155*index,10); },3000); } //该函数实现图片切换的动画效果 /* 封装移动函数 参数: obj:执行动画的对象 attr:要修改对象的属性名 target:执行动画的目标位置 speed:移动速度 */ function move(obj , attr , target , speed){ clearInterval(obj.timer); var current = parseInt(getstyle(obj,attr)); if(current>target){ speed = -speed; } obj.timer = setInterval(function(){ var oldvaule = parseInt(getstyle(obj,attr)); var newvaule = oldvaule + speed ; if(newvaule > target && speed>0 ||newvaule<target && speed<0) newvaule = target; obj.style[attr] = newvaule+"px"; if(newvaule ==target){ clearInterval(obj.timer); setA(); } },30) } /* 获取对象属性值的方法 */ function getstyle(obj,name){ return window.getComputedStyle?getComputedStyle(obj,null)[name] :obj.currentStyle[name]; } } </script>
这是js基础教学视频,关于轮播图制作的网址 https://www.bilibili.com/video/BV1YW411T7GX/?p=134
js轮播图代码_javascript基础(一)——轮播图相关推荐
- js装修计算器java代码_JavaScript代码实现简单计算器
本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下 一.实现功能 (1)利用css样式.javascript语言和html语言实现计算器的算法 (2)对计算 ...
- js微信抢红包脚本代码_javascript实现仿微信抢红包
仿微信抢红包 javascript实现仿微信抢红包 红包个数:个
- js微信抢红包脚本代码_JavaScript语言基于AutoJs简易微信抢红包参考大佬修改
//设备信息 var WIDTH = device.width, HEIGHT = device.height; device.keepScreenOn(); toast('欢迎使用微信红包辅助'); ...
- python画折线图代码-用Python画论文折线图、曲线图?几个代码模板轻松搞定!
前言 这几天在搞论文图,唉说实话抠图这种东西真能逼死人.坐在电脑前抠上一天越看越丑,最后把自己丑哭了-- 到了画折线图分析的时候,在想用哪些工具的时候.首先否决了excel,读书人的事,怎么能用exc ...
- html显示滚动焦点图代码,商城常用滚动的焦点图效果代码简单实用
这种商城的效果网上很多,但大多是插件,要么JS写的太过于复杂,对于学习的童鞋来说看起来比较费劲,这个看起来比较简单,也比较容易理解,各位童鞋需要的请围观,也欢迎各位评价,贴代码(为方便使用,代码复制即 ...
- python画动态图代码-Python使用matplotlib画动态图
import numpy as np import matplotlib.pyplot as plt import math from scipy.interpolate import make_in ...
- 阿里国际站详情页上装修轮播功能代码怎么做动画gif图片步骤教程方法技巧
阿里巴巴国际站店铺详情页如何制作轮播特效动效图片-国际站店铺如何制作轮播图片代码详情页添加轮播效果特效阿里巴巴国际站详情页添加轮播切换横幅banner图片 装修工具:一秒美工助手工具 如何装修详情页轮 ...
- 轮播切换_javascript基础(一)——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理 轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
- js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
最新文章
- python分几种_python有几种类型?
- 计算机中什么是适配器及作用,适配器是什么?适配器的作用主要有哪些
- C#高性能大容量SOCKET并发(十一):编写上传客户端
- Debian 升级到 PHP 7,并支持并行安装
- MySQL Group Replication 介绍
- BeetleX.Http.Clients V1.5发布
- 加州“电力十足 ” iPhone12加速贬值成全“十三香”
- React:组件的生命周期
- shiny动态仪表盘应用 | 中国世界自然文化遗产可视化案例
- 【从零开始学TVM】三,基于ONNX模型结构了解TVM的前端
- 亚马逊查询关键词排名的工具_亚马逊关键词的概念和查找工具
- 微信公众平台被动回复用户消息开发全步骤
- python怎样更新requests库-足球运动员的体能训练
- 视频会议中的AEC、AGC、ANS是什么?
- 深度学习七:GAN和DCGAN入门
- 腾讯海外计费系统架构演进
- BT 面板控制命令 宝塔 Linux 常用命令收集整理
- 20211219 小信号建模——状态空间法
- 南陵中学2021高考成绩查询,2018年南陵中学高考成绩喜报
- 基于8086单片机的PWM调光(带汇编)