原生JS-实现轮播图
用原生JS实现一个轮播图(效果)
HTML
<div id="outer">
<ul id="imgList">
<!-- 图片列表 -->
<li><img src="p1.jpg"/></li>
<li><img src="p2.jpg"/></li>
<li><img src="p3.jpg"/></li>
<li><img src="p4.jpg"/></li>
<li><img src="p5.jpg"/></li>
<li><img src="p1.jpg"/></li>
</ul>
<!-- 导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
CSS
*{
margin:;
padding:;
}
#outer{
width: 740px;
height: 450px;
margin: 50px auto;
background-color:skyblue ;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
position: absolute;
/* 偏移量 */
/* left: -740px; */
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
left: 307px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
}
#navDiv a:hover{
background-color: black;
}
JavaScript
window.onload = function(){
var imgList = document.getElementById('imgList');
var imgArr = document.getElementsByTagName('img');
var navDiv = document.getElementById('navDiv');
var outer = document.getElementById('outer');
var allA = document.getElementsByTagName('a');
//设置imgList的宽度
imgList.style.width = 740 * imgArr.length + 'px';
//设置导航按钮居中
navDiv.style.left = (outer.offsetWidth -navDiv.offsetWidth)/2 + 'px'; var index = 0;
var timer;
allA[index].style.backgroundColor = 'black';
for(var i = 0;i<allA.length;i++){
//给allA添加num属性,储存i索引
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num;
setA();
move(imgList,'left',-740*index,20,function(){
autoChang();
})
}
};
autoChang(); //设置导航按钮颜色
function setA(){
//判断index
if(index >= imgArr.length-1){
index = 0;
imgList.style.left = 0;
} for(var i = 0;i<allA.length;i++){
allA[i].style.backgroundColor = '';
}
allA[index].style.backgroundColor = 'black';
};
//自动轮播
function autoChang(){
timer = setInterval(function(){
index++;
index %= imgArr.length;
move(imgList,'left',-740*index,20,function(){
setA();
});
},3000)
}
//获取obj当前样式
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj ,null)[name];
}else{
return obj.currentStyle[name];
}
};
//切换图片
function move(obj,att,target,speed,callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(obj,att));
if(current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj,att));
var newValue = oldValue + speed;
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue = target;
}
obj.style[att] = newValue +'px';
if(newValue == target){
clearInterval(obj.timer);
callback && callback();
}
},30)
}
}
PS:
//添加属性
allA[i].num = i;
//函数的封装
move(obj,att,target,speed,callback)、getStyle(obj,att)
//回调函数
callback
//函数的调用
autoChang();
原生JS-实现轮播图的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生js封装轮播图
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- ios-Runtime调用私有方法
有时在代码中会有需要调用私有方法的场景,如不想import太多头文件:想组件设计一些解耦的模块:查看别人模块中未暴露的代码进行分析等. 在 ios 中调用私有方法有很多种方式,主要是通过Runtime ...
- MySQL(逻辑分层,存储引擎,sql优化,索引优化以及底层实现(B+Tree))
一 , 逻辑分层 连接层:连接与线程处理,这一层并不是MySQL独有,一般的基于C/S架构的都有类似组件,比如连接处理.授权认证.安全等. 服务层:包括缓存查询.解析器.优化器,这一部分是MySQL核 ...
- element-ui el-upload http-request自定义上传方法
html <el-form-item class="upload-bg register-bg" prop="ad_url"> <div cl ...
- 加载大图片的OOM异常
* 原因:系统分配给应用程序的堆内存 < 图片的大小* 解决方案:缩放图片显示* OOM:OutOfMemoryError * 图片的宽高 * 宽 2400 * 高 3200 * 手机屏幕的宽高 ...
- SmartTest__自动随机填充表单数据
下载地址https://addons.mozilla.org/zh-CN/firefox/addon/smarttesttool/ 安装完成后可以在工具栏看见 目前只包含两个功能 测试使用
- RabbitMQ学习之:(五)Exchange Type (转贴+我的评论)
From: http://lostechies.com/derekgreer/2012/03/28/rabbitmq-for-windows-exchange-types/ RabbitMQ for ...
- springMVC获取来访地址referer
@RequestMapping("publishPost.do") public String publishPost(@Valid @ModelAttribute Post po ...
- spark-on-yarn 学习
1. hdfs存文件的时候会把文件切割成block,block分布在不同节点上,目前设置replicate=3,每个block会出现在3个节点上. 2. Spark以RDD概念为中心运行,RDD代表抽 ...
- C# 3Des加密解密
第三方的加密规则约定:加密经过3DES加密后的Base64 编码 最近在对接一个第三方接口,请求参数和响应参数全采用3des加密规则,由于我是用.NET对接的,而第三方是Java开发的,所以两种程 ...
- 创建vue 项目
sudo npm install -g @vue/cli-init vue init webpack my-project cd my-project/ npm install npm run dev