原生js封装轮播图
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!
原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用
轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要
HTML代码
<div id="mlBox">
<div id="mlImg">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=511087584,1746612192&fm=26&gp=0.jpg" alt="" id="mlShow">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2251986177,3999926444&fm=26&gp=0.jpg" alt="">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2929314891,994527773&fm=26&gp=0.jpg" alt="">
</div>
<p id="mlSpan">
<span id="mlOn"></span>
<span></span>
<span></span>
</p>
<div id="mlLeft">
<img src="data:image/mlLeft.png" alt="">
</div>
<div id="mlRight">
<img src="data:image/mlRight.png" alt="">
</div>
</div>
CSS代码
<style>
#mlBox{
width: 600px;
height: 500px;
position: relative;
margin: 50px auto;
border: 1px #ececec solid;
}
#mlImg{
width: 600px;
height: 500px;
}
#mlImg img{
width: 600px;
height: 500px;
display: none;
}
#mlSpan{
width: auto;
height: 10px;
position: absolute;
left: %;
bottom: 20px;
}
#mlSpan span{
display: block;
float: left;
width: 10px;
height: 10px;
background: cornflowerblue;
border-radius: %;
margin: 2px;
z-index: ;
}
#mlImg #mlShow{
display: block;
}
#mlSpan #mlOn{
background: chartreuse;
}
#mlLeft{
width: 30px;
height: 30px;
background: rgba(,,,0.7);
position: absolute;
left: ;
top: %;
display: none;
}
#mlLeft img{
width: 30px;
height: 30px;
display: block;
}
#mlRight img{
width: 30px;
height: 30px;
display: block;
}
#mlRight{
width: 30px;
height: 30px;
background: rgba(,,,0.7);
position: absolute;
right: ;
top: %;
display: none;
}
</style>
JS代码
<script>
ml(true); //调用ml函数 注:传参是否需要左右指示 默认false
function ml(indicator) {
var oMlBox = document.getElementById('mlBox'); //获取id:mlBox
var oMlImg = document.getElementById('mlImg'); //获取id:mlImg
var oMlSpan = document.getElementById('mlSpan'); //获取id:mlSpan
var aSpan = oMlSpan.getElementsByTagName('span'); //获取id:mlSpan里面的span标签
var aImg = oMlImg.getElementsByTagName('img'); //获取id:mlImg里面的img标签
var oMlLeft = document.getElementById('mlLeft'); //获取id:mlLeft
var oMlRight = document.getElementById('mlRight'); //获取id:mlRight
var u = ; //当前照片位置
var shut = null; //定时器的名字
function f1() {
for (var i = ; i < aSpan.length; i++) { //循环id:mlSpan里面的span标签
aSpan[i].id = ''; //让span标签的id等于空
aImg[i].id = ''; //让id:mlImg里面img标签id等空
}
aSpan[u].id = 'mlOn'; //当前位置的span标签id等于mlOn
aImg[u].id = 'mlShow'; //当前位置的img标签id等于mlShow
}
for (var f = ; f < aSpan.length; f++) { //循环id:mlSpan里面的span标签
aSpan[f].index = f; //span标签第f个的index等于f
aSpan[f].onclick = function () { //点击span标签 注:照片下面的三个点
u = this.index; //当前位置等于当前span标签index的位置
f1(); //调用f1函数
}
}
oMlBox.onmousemove = function () { //鼠标悬浮id:mlBox
clearInterval(shut); //关闭定时器
if (indicator) { //是否显示左右指示 注:调用ml函数传参
oMlLeft.style.display = 'block'; //显示左指示
oMlRight.style.display = 'block'; //显示右指示
oMlRight.onclick = function () { //点击右指示
u++; //当前位置加一
if (u >= aImg.length) { //当前位置大于照片的数量就等于0
u = ;
}
f1(); //调用f1函数
};
oMlLeft.onclick = function () { //点击左指示
u--; //当前位置减一
if (u < ) { //当前位置小于0时就让当前位置等于照片数量减一
u = aImg.length - ; //注:因为计算机从零开始数所以要减一
}
f1(); //调用f1函数
};
}else{
oMlLeft.style.display = 'none'; //左指示消失
oMlRight.style.display = 'none'; //右指示消失
}
};
oMlBox.onmouseout = function () { //当鼠标移出id:mlBox
f2(); //调用f2函数
oMlLeft.style.display = 'none'; //左指示消失
oMlRight.style.display = 'none'; //右指示消失
};
function f2(){
shut = setInterval(function () { //定时器
u++; //每3秒当前位置加一
if (u >= aImg.length) { //当前位置大于等于照片的数量当前位置等于0
u = ;
}
f1(); //调用f1函数
},);
}
f2(); //调用f2函数
}
</script>
原生js封装轮播图的更多相关文章
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
随机推荐
- asp.net中C#调用存储过程
创建存储过程: create procedure houseCount ( ), @house_count int output ) as select @house_count=COUNT(*) f ...
- DELPHI高性能大容量SOCKET并发(八):断点续传(上传也可以续传)
断点续传 断点续传主要是用在上传或下载文件,一般做法是开始上传的时候,服务器返回上次已经上传的大小,如果上传完成,则返回-1:下载开始的时候,由客户端上报本地已经下载大小,服务器根据位置信息下发数据, ...
- python 整数中1出现的次数
把整数转换为字符串 用count计数 # -*- coding:utf- -*- class Solution: def NumberOf1Between1AndN_Solution(self, n) ...
- MacOS系统升级后,IDEA的SVN不好用的问题
最近给MacOS升级到10.13.2(High Sierra). 结果,发现IDEA的SVN不好用了. 提示如下: 查看IDEA的Subversion设置应该是这个样子的: 但是,设置后没有效 ...
- 关于MySql链接url参数的设置 专题
报错: Establishing SSL connection without server's identity verification is not recommended. According ...
- js 点谁谁哭
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- WPF 列表样式
<Window x:Class="CollectionBinding.MainWindow" xmlns="http://schemas.micros ...
- Lambda表达式的参数捕获
以常用的Action委托为例: 有如下3个无参数的方法: public void Function() { //Do something } public void Function2() { //D ...
- 探究操作系统的内存分配(malloc)对齐策略
问题: 我们在写程序的时候经常发现程序使用的内存往往比我们申请的多,为了优化程序的内存占用,搅尽脑汁想要优化内存占用,可是发现自己的代码也无从优化了,怎么办?现在我们把我们的焦点放到malloc上,毕 ...
- PHP XDebug Sublime Text 单步调试
前置环境:已经安装好LNMP 1. 安装xdebug 可以通过pear包管理来安装 sudo apt-get install php-pear sudo pecl install xdebug 这里我 ...