<!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. 【PHP用户的错误日志】

    将产生的错误保存在日志中的方法:使用error_log方法,其中,当日志类型是3的时候,下一个参数将会是日志文件的保存路径 使用示例: <?php function myerror($level ...

  2. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  3. 第一部分：使用iReport制作报表的详细过程（Windows环境下）

    提示:在有些板块,文中的图片看不到,建议到我的blog浏览文章:http://blog.csdn.net/jemlee2002/文章将会涉及3个方面的内容: 第一部分:使用iReport制作报表的详细 ...

  4. hdu 2203:亲和串（水题，串的练习）

    亲和串 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. php的时间输出格式

    php中时间一般分为两种格式,一种是标准时间格式timestamp,即Y-m-d G:i:s.另一种就是时间戳. 例如: 一.标准时间与时间戳转换: //获得服务端系统时间 date_default_ ...

  6. Sonar规则学习笔记

    1. A catch statement should never catch throwable since it includes errors. 在catch里永远不要抛出throwable. ...

  7. 利用IdentityServer3在ASP.NET 5和Angular中实现OAuth2 Implicit Flow

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过的IdentityServer3虽然是基于Katana开发的,不过同样可以托 ...

  8. JS 获取元素当前的样式信息

    HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocu ...

  9. 用Feature的方式删除SharePoint2010的Page中重复的WebPart

    用Feature的方式删除SharePoint2010的Page中重复的WebPart. 代码如下所示: public class SupportCenterDuplicatedWebpartRemo ...

  10. 使用python做科学计算

    这里总结一个guide,主要针对刚开始做数据挖掘和数据分析的同学 说道统计分析工具你一定想到像excel,spss,sas,matlab以及R语言.R语言是这里面比较火的,它的强项是强大的绘图功能以及 ...