原生js写轮播图效果
<script>
var picarr=[
"pic/lb1.jpg",
"pic/lb2.jpg",
"pic/lb3.jpg",
"pic/lb4.jpg"
];
//全局变量index控制当前所在第几张图片
var index=;
var timer;
var radiobtn= document.getElementsByClassName("tubiao")[].getElementsByTagName("span");
function autochang(index) {
var index=parseInt(index);
document.getElementsByClassName("content_1")[].style.backgroundImage="url("+picarr[index]+")";
for(var j=;j<radiobtn.length;j++){
radiobtn[j].className="";
}
radiobtn[index].className="actived";
}
function change(index){
setInterval("autochang((index++)%radiobtn.length);",);
}
//页面加载成功初始效果
change(index);
//当鼠标点击点点的时候切换效果
for(var i=;i<radiobtn.length;i++){
radiobtn[i].index = i;
radiobtn[i].onclick=function () {
clearInterval(timer);
autochang(this.index);
index=this.index;
}
}
//点击左箭头
document.getElementsByClassName("left_jiantou")[].onclick=function(){
index--;
if(index<){
index=radiobtn.length-;
}
autochang(index);
}
//点击右箭头
document.getElementsByClassName("right_jiantou")[].onclick=function(){
index++;
if(index>=radiobtn.length){
index=;
}
autochang(index);
}
</script>
原生js写轮播图效果的更多相关文章
- 原生Js写轮播图代码
html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
- 第54天:原生js实现轮播图效果
一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
随机推荐
- Mysql共享锁、排他锁、悲观锁、乐观锁及其使用场景
一.相关名词 |--表级锁(锁定整个表) |--页级锁(锁定一页) |--行级锁(锁定一行) |--共享锁(S锁,MyISAM 叫做读锁) |--排他锁(X锁,MyISAM 叫做写锁) |--悲观锁( ...
- Putty中的pscp和psftp的简明用法
用习惯了putty,那是真心的方便啊,putty文件夹下其他的小兄弟也不能忽略啊. 以前的时候,从远程服务器下载个文件用winscp,后来,发现在putty文件夹里好像有一个 pscp和psftp,今 ...
- 做自己的docker镜像(基于ubuntu:16.04)
基于ubuntu:16.04 apt-get update -y apt-get install sudo -y 换源 sudo apt-get install vim sudo vim /etc/a ...
- python学习之类的反射
在学习网络编程的时候用到反射,然后发现自己反射这部分的应用不是很熟练,决定返回来重新整理一下 对于类的反射,主要有四个用法,下面都说一下 1.hasattr 判断对象或者类是否存在指定的属性,看代码以 ...
- Nvidia和Google的AI芯片战火蔓延至边缘端
AI 的热潮还在持续,AI 的战火自然也在升级.英伟达作为这一波 AI 浪潮中最受关注的公司之一,在很大程度上影响着 AI 的战局.上周在美国举行的 GTC 2019 上,黄仁勋大篇幅介绍了英伟达在 ...
- Docker镜像拉不下来?试试这些
DaoCloud 加速器1.0(永久免费) DaoCloud是国内第一家Dock Hub加速器提供商 注意,加速器 2.0 需要使用 DaoCloud 自己的云服务器才可以使用.官方宣称会继续支持加速 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- 语义SLAM研究现状总结
博客转载自:https://blog.csdn.net/xiaoxiaowenqiang/article/details/81051010 原文标题:深度学习结合SLAM 语义slam 语义分割 端到 ...
- Django+Vue打造购物网站(五)
注册和登陆 drf的认证 http://www.django-rest-framework.org/api-guide/authentication/ settings.py文件的配置 INSTALL ...
- [NOIp2016] 换教室
题目类型:期望\(DP\) 传送门:>Here< 题意:现有\(N\)个时间段,每个时间段上一节课.如果不申请换教室,那么时间段\(i\)必须去教室\(c[i]\)上课,如果申请换课成功, ...