<!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 EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】

    一.使用过滤器实现全站压缩 1.目标:对网站的所有JSP页面进行页面压缩,减少用户流量的使用.但是对图片和视频不进行压缩,因为图片和视频的压缩率很小,而且处理所需要的服务器资源很大. 2.实现原理: ...

  2. NuGet安装和使用

    1. NuGet是什么? NuGet is a Visual Studio 2010 extension that makes it easy to add, remove, and update l ...

  3. SOLR+LUCENE错误

    java.lang.NoClassDefFoundError: org/apache/lucene/analysis/synonym/SynonymFilter 该错误发生在自定义SOLR服务器时,原 ...

  4. thinkphp调用phpqrcode.php生成二维码

    thinkphp3. 把phpqrcode文件夹放在ThinkPHP\Library\Vendor\下面 phpqrcode下载: http://files.cnblogs.com/files/qho ...

  5. 跟着鸟哥学Linux系列笔记0-扫盲之概念

    相关缩写全称: POSIX(Portable Operation System Interface):可携式操作系统接口,重点在于规范内核与应用之间的接口,由IEEE定义发布 IEEE: 美国电气与电 ...

  6. Codeforces Round #337 (Div. 2) D. Vika and Segments 线段树 矩阵面积并

    D. Vika and Segments     Vika has an infinite sheet of squared paper. Initially all squares are whit ...

  7. linux下vim配置以及一些常用的快捷键

    一些常用的vim编辑器快捷键: h」.「j」.「k」.「l」,分别控制光标左.下.上.右移一格. 按「ctrl」+「b」:屏幕往“后”移动一页. 按「ctrl」+「f」:屏幕往“前”移动一页. 按「c ...

  8. Java学习笔记（九）——继承

    一.继承 1.概念: 继承是类于类之间的关系,是一种"is a "的关系 Ps: Java是单继承 2.优势: (1)子类直接拥有父类的所有属性和方法(除了privata) (2) ...

  9. 智能车学习（五）—— dac学习

    一.代码共享: 1.dac.h #ifndef DAC_H_ #define DAC_H_ #include "common.h" // 2.2 DAC控制寄存器0 位定义 #de ...

  10. CF731C Socks并查集(森林),连边，贪心，森林遍历方式，动态开点释放内存

    http://codeforces.com/problemset/problem/731/C 这个题的题意是..小明的妈妈给小明留下了n只袜子,给你一个大小为n的颜色序列c 代表第i只袜子的颜色,小明 ...