原生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.注意在动画时 ...
随机推荐
- SkylineGlobe7.0.1版本 支持SQLite(*.sqlite;*.db)数据库
SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了 ...
- C语言的3种参数传递方式
参数传递,是在程序运行过程中,实际参数就会将参数值传递给相应的形式参数,然后在函数中实现对数据处理和返回的过程,方法有3种方式 值传递 地址传递 引用传递 tips: 被调用函数的形参只有函数被调用时 ...
- 第三章 启动rabbitmq的webUI
一.启动步骤 1.启动rabbitmq rabbitmq-server (前台启动)或者rabbitmq-server -detached(后台启动) 2.启动rabbitmq_management ...
- PTA 天梯赛练习 7-11 玩转二叉树-二叉树重建
以前就思考过这个问题,但是没有深入的想过,这是一种叫二叉树重建的典型题目 如果给出中序和前序,求出后序遍历. 这道题则求的是交换儿子节点的层序遍历. 二叉树的重建应该怎么重建,首先我们知道,先根遍历, ...
- Python Revisited (变量)
目录 = 浅拷贝 深拷贝` 函数的默认参数为可变类型时 危险 全局变量与临时变量 global 在函数里面进行复制 再看一个例子 numpy里的bug? 待续 @ 首先,需要指出的是,Python的变 ...
- VS2010安装MVC4记录
想学MVC4,但自己电脑上是VS2010,所以在网上查询怎样安装MVC4,总结下给大家. VS2010默认安装的是MVC2,安装MVC4必须先装 SP1,然后安装MVC4. VS2010 SP1 (1 ...
- __init__和__new__的区别
根据官方文档: __init__是当实例对象创建完成后被调用的,然后设置对象属性的一些初始值. __new__是在实例创建之前被调用的,因为它的任务就是创建实例然后返回该实例,是个静态方法. 也 ...
- 【学习总结】GirlsInAI ML-diary day-9-dict字典
[学习总结]GirlsInAI ML-diary 总 原博github链接-day9 认识dict字典 新的数据类型dict. dict全称dictionary,在其他语言中也称为map,使用键-值( ...
- Ajax 简单的实例代码
<!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0 ...
- jvm学习一:类加载过程详解
(自学笔记,持续更新,欢迎指正) 我们都知道一个java程序运行要经过编译和执行,但是这太概括了,中间还有很多步骤,今天来说说类加载 学完类加载之后,java运行过程就可以分为 编译 > 类 ...