<!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. 【翻译六】java-连接和实例

    Joins The join method allows one thread to wait for the completion of another. If t is a Thread obje ...

  2. 无废话ExtJs 入门教程十一[下拉列表：Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  3. 【ubuntu 】常见错误--Could not get lock /var/lib/dpkg/lock

    ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock 通过终端安装程序sudo apt-get install xxx时出错: E: Could not ...

  4. Tkprof工具详解一

      注明:一些文章是从别人的博客中转载过来的,方便自己以后查阅:在数据库生成的oracle trace文件中,可读性是比较差的,此时可使用tkprof工具来格式化trace文件,tkprof是一个命令 ...

  5. 验证备份前设置CONFIGURE CONTROLFILE AUTOBACKUP ON/OFF; 的区别

    关于rman的,环境: oracle 10.2.0 rman nocatalog方式 1.首先设置 CONFIGURE CONTROLFILE AUTOBACKUP ON; 然后进行数据库全备份 RM ...

  6. 10gRAC运行srvctl报错error while loading shared libraries:

    数据库10g才会有这个错,因为11g的grid和oracle是分开的. [oracle@news01 orcl]$ srvctl /u01/app/oracle/db_1/jdk/jre/bin/ja ...

  7. Android 弹出对话框Dialog充满屏幕宽度

    final View view = LayoutInflater.from(context).inflate(layoutId, null); final Dialog dialog = new Di ...

  8. 【转】Linux 查看内存(free buffer cache)

    转自:http://elf8848.iteye.com/blog/1995638 Linux下如何查内存信息,如内存总量.已使用量.可使用量.经常使用Windows操作系统的朋友,已经习惯了如果空闲的 ...

  9. LoadRunner11录制APP脚本（1）

    1.测试准备: a.首先安装LoadRunner11.0的版本跟新

  10. 【转】Docker 常用命令

    转载: http://blog.csdn.net/zhang__jiayu/article/details/42611469   docker images:列出本地所有镜像 docker searc ...