//用原生js实现了一个简单的轮播图效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#banner{
position: relative;
}
#list{
width: 750px;
height: 500px;
margin: 100px auto;
}
#list img{
display: block;
}
#list1{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -75px;
}
#list1 li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 20px;
background: #000;
opacity: .4;
filter: alpha(opacity = 40) ;
float: left;
margin-left:10px ;
cursor: pointer;
}
#banner a{
display: block;
width: 30px;
height: 30px;
background: #000;
opacity: .4;
position: absolute;
top: 50%;
margin-top: -15px;
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: center;
}
#left{
left: 21%;
}
#right{
right: 21%;
}
#list1 .li{
background: #f40;
}
#box{
width: 750px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="banner">
<div id="box">
<div id="list">
<img id="pic" src="img/1.jpg" />
</div>
<a href="javascript:;" id="left"><</a>
<a href="javascript:;" id="right">></a>
</div>
<ul id="list1">
<li class="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var oList = document.getElementById("list");
var oList1 = document.getElementById("list1");
var oLi = document.getElementsByTagName('li');
var oPic = document.getElementById("pic");
var Left = document.getElementById("left");
var Right = document.getElementById("right");
var box = document.getElementById("box");
num = 1;
var timer = setInterval(function(){
num++;
if(num>5){
num=1;
}
fn();
},2000)
oList.onmouseout = function(){
timer = setInterval(function(){
num++;
if(num>5){
num=1;
}
fn();
},2000)
}
box.onmouseover = function(){
clearInterval(timer);
}
Right.onclick = function(){
num++;
if(num>5){
num =1;
}
fn();
}
Left.onclick = function(){
num--;
if(num<1){
num = 5;
}
fn();
}
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
num = this.index+1;
fn();
}
}
function fn(){
oPic.src = "img/"+num+".jpg";
for (var i=0;i<oLi.length;i++) {
oLi[i].className = '';
if(num == i+1){
oLi[i].style.background = '#f40';
}else{
oLi[i].style.background = '';
}
}
}
</script>
</body>
</html>

原生js轮播图的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  3. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  4. 原生js轮播图实现

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

  5. 面向对象原生js轮播图

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

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

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

  7. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

  8. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  9. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

随机推荐

  1. 【PHP系列】PHP推荐标准之PSR-3，日志记录器接口

    上节聊完了PHP官方的相关代码规范,下面给大家带来了PHP系列的PHP推荐标准的另外两个,PSR-3,PSR-4. 首先,我们先来了解下PSR-3是怎么回事. PHP-FIG发布的第三个推荐规范与前两 ...

  2. MD5算法学习整理

    一路学来 记得笔记不少 但是给自己看 当时就记得很随意 以为后面都懂 但还是太单纯了,现在回顾 自己都完全看不下去,所以以后的都放的博客上,让自己看懂,让感兴趣的看懂,详细,暴力 不废话了 MD5算法 ...

  3. 学习接水系统（java+thread线程）

    (一)项目框架分析 对于学生并发接水项目,根据面向对象的思想,需要创建两个对象,即学生和水龙头. 接下来主要讲解不排队接水和排队接水两张情况. 项目的目录文件如下: (二)不排队接水 假设有四个学生小 ...

  4. stm32 复位后 引起引脚的变化，输出电平引起的问题

    在做项目的时候,需要通过蓝牙发送指令给STM32,使其复位,然后进入bootloader程序进行升级,但是复位后会导致蓝牙模块关机.stm32有个引脚连接着蓝牙的开关机引脚,高电平开机,低电平关机,我 ...

  5. js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...

  6. 每天一个linux命令(47)--scp命令

    scp是secure  copy 的简写,用于在Linux 下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝而不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当 ...

  7. 免费的ERP真的那么可怕？请少一些偏见！

    为什么说这个话题,因为看到了太多关于对免费ERP的偏见,也许这也只是那些卖软件的营销策略:从事这个行业的人,应该能看出其中的端倪,但是对于吃瓜群众来说,那就真是误导了... 所以今天发表下自己的看法, ...

  8. if（）{}else 语句的正确写法以及它的嵌套使用

    if(一个返回bool值的条件表达式) { 程序块 } else{} 它的执行过程我们可以通过一个程序来了解 static void Main(string[] args) { ) // 条件1 { ...

  9. 《你不知道的JavaScript》整理（五）——值与原生函数

    一.值 1)数字 JavaScript只有一种数值类型:number(数字),包括"整数"和带小数的十进制数. //数字的语法 a.toExponential(); // &quo ...

  10. Spring总结_04_容器和bean

     一.概念理解 1.容器 IoC容器负责容纳并管理bean,在Spring中,BeanFactory是IoC容器的核心接口. 它的职责包括:实例化.定位.配置应用程序中的对象及建立这些对象间的依赖. ...