<!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. Validform 学习笔记---基础知识整理

    面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也 ...

  2. mac liteIDE调试配置

    http://studygolang.com/articles/1636 brew install https://raw.github.com/Homebrew/homebrew-dupes/mas ...

  3. 数据结构之图 Part3 – 1 遍历

    DFS using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...

  4. ASP.NET 5中的ASP.NET Bundles跑到哪里去了？

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 众所周知,在ASP.NET MVC中很早就存在一个所谓的"bundling and ...

  5. TensorFlow

    转自:http://blog.csdn.net/stdcoutzyx/article/details/51645396 本片博文是参考文献[1]的阅读笔记,特此声明 TensorFlow,以下简称TF ...

  6. WebRTC代码走读（十）：rtp_rtcp模块分析，webrtcrtp_rtcp

    转自:http://www.bkjia.com/Androidjc/1020017.html 1. 对外提供的主要流程接口       收包的调用接口RtpReceiverImpl::Incoming ...

  7. UI中 frame 与 transform的用法与总结

    在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...

  8. Java学习笔记（十）——多态

    一.多态 1.对象的多种形态 (1)引用多态: 父类的引用可以指向本类的对象 父类的引用可以指向子类的对象 (2)方法多态: 创建本类对象时,调用的方法为本类方法: 创建子类对象时,调用的方法是子类方 ...

  9. Linux使用jstat命令查看jvm的GC情况

    Linux使用jstat命令查看jvm的GC情况 http://www.open-open.com/lib/view/open1390916852007.html http://www.aiuxian ...

  10. MySql数据库安装&修改密码&开启远程连接图解

    相关工具下载地址: mysql5.6 链接:http://pan.baidu.com/s/1o8ybn4I密码:aim1 SQLyog-12.0.8 链接:http://pan.baidu.com/s ...