1.js实现轮播图效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="奇客艺术">
<meta name="keyword" content="关键字">
<meta name="description" content="描述">
<title>js实现轮播图效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 1024px;height: 280px;margin: 0 auto;position: relative;overflow: hidden}
#box ul{width:6144px;margin-left: 0;transition: 0.2s;}/*transition为css3属性实现过渡效果*/
#box ul li{list-style-type: none;width: 1024px;height: 280px;float: left}
#box .btn #left,#box .btn #right{width: 30px;height: 40px;background: rgba(0,0,0,.4);position: absolute;top: calc(50% - 20px);cursor: pointer; }
#left{left: 0;}
#right{right: 0;}
#box .btn #left img,#box .btn #right img {width: 100%;height: 100%}
#box #nav{position: absolute;left: calc(50% - 43px);bottom:10px;width:86px;height: 10px;}
#box #nav span{background:#cccccc;width: 10px;height: 10px;float: left;border-radius: 50%;margin-left: 6px;cursor: pointer}
#box #nav .on{background: #f50}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
<li><img src="data:images/5.jpg"></li>
</ul>
<div class="btn">
<div id="left"><img src="data:images/left.png"></div>
<div id="right"><img src="data:images/right.png"></div>
</div>
<div id="nav">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script language="JavaScript">
var oSpan=document.getElementsByTagName('span');
var oUL=document.getElementsByTagName('ul')[0];//获取ul标签
var oBtn=document.getElementsByClassName('btn')[0];
var oDiv=oBtn.getElementsByTagName('div');
var oBox=document.getElementById('box');
var index=0;
var number=0;
var timer;//定义定时器变量
play();
for(var i=0;i<oSpan.length;i++){
oSpan[i].nxl=i;//自定义属性 i=0,1,2,3,4
oSpan[i].onclick=function () {
oSpan[index].className='';//index初始为0，将第一个span属性清空，即去掉了on里的属性
index=this.nxl;//保存获取的被点击的序列号
this.className='on';
oUL.style.marginLeft=-1024*index+'px';
}
}
//点击按钮实现图片变换
for(var j=0;j<oDiv.length;j++){
oDiv[j].nxl=j;
oDiv[j].onclick=function () {
number=this.nxl;
oSpan[index].className='';
if (number){
index++;
if(index>4) {
index=0;
}
}else {index--;
if (index<0){
index=4;
}
}
oSpan[index].className='on';
oUL.style.marginLeft=-1024*index+'px';
}
}
//鼠标滑在id为box的div上
oBox.onmouseover = function () {
clearInterval(timer);
}
//鼠标滑出id为box的div
oBox.onmouseout = function () {//onmouseleave同onmouseout 鼠标滑出
play();//调用play函数
}
//使用定时器实现图片自动变换
function play() {
timer = setInterval(function () {
oSpan[index].className='';
index++;
if(index>4){index=0;}
oSpan[index].className='on';
oUL.style.marginLeft = -1024*index+'px';
},2000)//每2秒执行一次
}
</script>
</body>
</html>

2.效果图

源码：js实现轮播图效果.zip

备注：

　　文章为本人原创  转载请注明出处  文章难免会有纰漏之处  还望大家多多包含  如有意见或者建议可与本人联系  本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）

js实现轮播图效果(附源码)--原生js的应用的更多相关文章

  1. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  2. 第54天：原生js实现轮播图效果

    一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...

  3. 原生js写轮播图效果

    <script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...

  4. 无限循环轮播图之结构布局（原生JS）

    html部分 <div class="box" id="box"> <ul> <li><img src="i ...

  5. 无限循环轮播图之运动框架（原生JS）

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  8. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  9. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

随机推荐

  1. idea live template高级知识, 进阶(给方法,类,js方法添加注释)(二)

    上一篇文章(http://www.cnblogs.com/xzjxylophone/p/6994488.html) 是在 groovyScript中直接添加的代码,这个看起来是简单,粗暴,麻烦和不美观 ...

  2. java中的vo、dto 、dao

    VO是跟数据库里表的映射,一个表对应一个VO  DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成  BO是业务层,做逻辑处理的 VO , PO , BO , QO, DAO ,POJO  ...

  3. WCF学习——构建一个简单的WCF应用（二）

    我们接着上一篇文章进行讲解 http://www.cnblogs.com/songjianhui/p/7060698.html 一:客户端通过添加引用调用服务 WCF应用服务被成功寄宿后,WCF服务应 ...

  4. 小程序解析html标签wxPrase插件

    微信小程序的标签和原来我们习惯用的标签是不一样的,例如视图容器标签小程序是view,然而html就很多比如常用的div就和小程序的view类似. 通常我们在开发小程序(从列表页跳转到详情页)通过富文本 ...

  5. ReactJS基础(续)

    前边的ReactJS基础,我们可以了解到,对于React,可以说是万物皆组件 React的组件应该具有 可组合(Composeable)可重用(Reusable)可维护(Maintainable)的特 ...

  6. Log4Net不同日志类型写入到不同文件

    1. 一直在用log4net,从来没有自己整理过.实践出真知,只有自己整理过才能真正掌握. 2. log4net,应该读logfornet,以前一直说log4,log4............ 安装 ...

  7. ArrayList原理解析

    简介 ArrayList就是动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了动态的增加和减少元素,实现了ICollection和IList接口,灵活的设置数组的大小等好处 有图有码 图 ...

  8. accp8.0转换教材第4章MySQL高级查询(二)理解与练习

    知识点:EXISTS子查询.NOT EXISTS子查询.分页查询.UNION联合查询 一.单词部分 ①exist存在②temp临时的③district区域 ④content内容⑤temporary暂时 ...

  9. Your password does not satisfy the current policy requirements

    创建用户,做测试想设置一个简单的密码.报错: 大概是MySQL5.7搞事情,默认安装了validate_password插件. mysql> SHOW VARIABLES LIKE 'valid ...

  10. 代码规范--捡拾(SQL语句)

    最近在看阿里的JAVA开发手册,话不多说进入正题. 1.[强制]不使用count(列名)或者是count(常量)代替count(*) 因为count(*)会统计NULL值,前面的两个不会 2.[强制] ...