<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#wrap{
width:500px;
height:260px;
margin:50px auto;
position:relative;
overflow: hidden;
border: 1px solid #000;
}
#wrap a {
width:30px;
height:30px;
line-height:30px;
background: red;
opacity: 0.3;
display: block;
text-align: center;
z-index:990;
position: absolute;
text-decoration: none;
}
#prev{left:0;
top:110px;
}
#next{right:0;
top:110px;}
#box li{
width:500px;
height:260px;
}
#box{
position: absolute;
height:1300px;
}
img{
width:500px;
height:260px;
}
#btn{
position: absolute;
bottom:10px;
text-align: center;
margin-left: 175px;
z-index: 999;
}
#btn li{
width:20px;
height:20px;
border-radius: 20px;
background: #ccc;
margin-left: 5px;
float:left;
}
#wrap #btn li.active{background:mediumvioletred;}
</style>
<script src="move1.js"></script>
<script>
window.onload=function(){
var oWrap=document.getElementById('wrap');
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oBox=document.getElementById('box');
var aLi=oBox.children;
var oBtn=document.getElementById('btn');
var aBtn=oBtn.children;
var iNow=0;
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
iNow=this.index;
tab();
}
};
function tab(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
}
aBtn[iNow].className='active';
move(oBox,{top:-aLi[0].offsetHeight*iNow},{time:1000,easing:'ease-in'});
};
oPrev.onclick=function(){
iNow--;
if(iNow==-1)iNow=aBtn.length-1;
tab();
};
oNext.onclick=next;
function next() {
iNow++;
if (iNow == aBtn.length)iNow = 0;
tab();
};
var timer=null;
timer=setInterval(next,2000);
oWrap.onmouseover=function(){
clearInterval(timer) ;
};
oWrap.onmouseout=function(){
timer=setInterval(next,2000);
};
}
</script>
</head>
<body>
<div id="wrap">
<a href="javascript:;" id="prev">←</a>
<a href="javascript:;" id="next">→</a>
<ul id="box">
<li><img src="img/b1.jpg" alt=""/></li>
<li><img src="img/b2.jpg" alt=""/></li>
<li><img src="img/b3.jpg" alt=""/></li>
<li><img src="img/b4.jpg" alt=""/></li>
<li><img src="img/b5.jpg" alt =""/></li>
</ul>
<ol id="btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>

js小效果-轮播图的更多相关文章

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

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

  2. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  3. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  4. 图解微信小程序---轮播图

    图解微信小程序---轮播图 代码笔记 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加 ...

  5. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  6. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  8. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  9. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

随机推荐

  1. Win10 VS2015 社区版切换到VS2013社区版 进行维护之前的项目

    前提:当先在Win10 OS 安装了vs2015之后开发Win UAP,之后要维护之前的WP8 版本,安装了VS2013社区版 打开后 1问.Exception from HRESULT: 0x897 ...

  2. hdu 4412 2012杭州赛区网络赛 期望

    虽然dp方程很好写,就是这个期望不知道怎么求,昨晚的BC也是 题目问题抽象之后为:在一个x坐标轴上有N个点,每个点上有一个概率值,可以修M个工作站, 求怎样安排这M个工作站的位置,使得这N个点都走到工 ...

  3. 第十七篇：使用窗口的cache属性加速SOUI的渲染

    内容渲染速度是决定一个UI成败的关键.无论UI做得多华丽,没有速度都没有意义. 在MFC,WTL等开发框架下,每个控件都是一个窗口,窗口只需要画前景,背景.因为窗口之间的内容不需要做混合,一个子窗口的 ...

  4. ZEALER背后的乐视云视频

    ZEALER是我非常喜欢的一个测评网站,经常访问看看手机.电动牙刷及机械键盘的测试视频,非常欣赏王自如的数据化测评理念.敬畏之心,以及不祛痘的视频. 刚好最近对网络视频应用比较感兴趣,觉得ZEALER ...

  5. LayoutInflater(二)

    每一个视图的绘制过程都必须经历三个最主要的阶段,即onMeasure().onLayout()和onDraw(),下面我们逐个对这三个阶段展开进行探讨. 一. onMeasure() measure是 ...

  6. 使用Hue上传hive数据

    大概逻辑是先上传hdfs数据,然后创建hive外部表,关联到hdfs上传数据的位置. 截图比较概要,但是用起来很简单 1.创建路径和上传文件 2.创建外部表

  7. windows下配置python库

    安装easy_install: 下载ez_setup.py文件,命令行执行python ez_setup.py; 将python文件夹下的Scripts文件夹加入到系统path路径: 检查easy_i ...

  8. POJ 3274 HASH

    题目链接:http://poj.org/problem?id=3274 题意+思路: 点击这里 补充:因为有减法运算,所以可能会造成运算后结果为负数,所以需要把结果统一转换成正数[不然数组下标访问不到 ...

  9. mongodb学习05 操作详解(3)

    高级查询选项 //简单查询 var cursor = db.foo.find({"foo" : "bar"}) //封装查询 var cursor = db.f ...

  10. canvas 3D运动球效果 多球

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...