<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>图片轮播</title>
*{
margin:0;
padding: 0; 
}
a{
text-decoration: none;
}
body{
font-family:"Microsoft YaHei";
}

.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}

.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-img{
background: no-repeat;
    width:1200px;
height:460px;
}
.img1{
background-image:url(img/1.jpg);
}
.img2{
background-image:url(img/2.jpg);
}
.img3{
background-image:url(img/3.jpg);
}
.img4{
background-image:url(img/4.jpg);
}

.info{
width:1200px;
}
span{
display: inline-block;
width: 296px;
height:50px;
background:#fff;
text-align: center;
line-height: 50px;
font-size: 22px;
}
.active{
background: #FFCC00;
color: #666;
}
</head>

<body>
<div class="main" id="main">
<!-- 选项卡 -->
<div class="info" id="info">
<span class="active">首页</span>
<span>点击看看</span>
<span>会自动的</span>
<span>我的网站</span>
</div>
<!-- 图片轮播 -->
<div class="banner" id="banner">
<a href="">
<div class="banner-img img1"></div>
</a>
<a href="">
<div class="banner-img img2"></div>
</a>
<a href="">
<div class="banner-img img3"></div>
</a>
<a href="">
<div class="banner-img img4"></div>
</a>
</div>
</div>
var timer = null,
index = 0,
oMain = document.getElementById("main"),
oImg=document.getElementById("banner").getElementsByTagName("div"),
oSpan=document.getElementById("info").getElementsByTagName("span"),
    len=oImg.length;

//移出页面,图片自动轮播   
oMain.onmouseout=function(){
clearInterval(timer)
timer=setInterval(function(){
index++
   if(index>len-1){
index=0
  }
autoimg()
},1000)
}
//调用移出函数,打开页面就自动轮播
oMain.onmouseout()

//移入页面,清除定时器,轮播停止
oMain.onmouseover=function(){
clearInterval(timer)
}

function autoimg(){
for (var i=0;i<len;i++) {
 oImg[i].style.display="none"
 oSpan[i].className=""
}
oImg[index].style.display="block"
oSpan[index].className="active"
}

for (var i = 0; i <len; i++) {
oSpan[i].index=i;  //将每个i的值赋值给oSpan[i].index
oSpan[i].onclick=function(){
         index=this.index     //设置index等于当前点击的oSpan
         autoimg()
}
}
</body>

</html>

js-图片轮播(极简)的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  4. js 图片轮播(一)

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

  5. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  6. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 非常简洁的js图片轮播

    <div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

  8. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

  9. angular js 图片轮播

    搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...

随机推荐

  1. java第八章JDBC

    JDBC实现各种数据库的访问 实现把各种数据存入数据库从而长久保存(JDBC充当了java应用程序于各种不同数据库之间进行对话的媒介) JDBC工作原理 JDBC API由Sun公司提供,主要包括Co ...

  2. 简单的页面互点Javascript代码

    简单的页面互点Javascript代码,可以适用于前端$(function(){ $('.ip_b_con_item li,.pro_index_list li').mouseover(functio ...

  3. Ubuntu开机时提示“piix4_smbus 0000:00:07.3: SMBus Host controller not enabled”

    问题描述:Ubuntu开机时提示“piix4_smbus 0000:00:07.3: SMBus Host controller not enabled” 版本:Ubuntu 18.04    VMw ...

  4. Ambari2.6.2 HDP2.6.5 大数据集群搭建

    Ambari 2.6.2 中 HDFS-2.7.3 YARN-2.7.3 HIVE-1.2.1 HBASE-1.1.2 ZOOKEEPER-3.4.6 SPARK-2.3.0 注:本文基于root用户 ...

  5. scrapy meta信息丢失

    在做58同城爬二手房时,由于房产详情页内对价格进行了转码处理,所以只能从获取详情页url时同时获取该url对应房产的价格,并通过meta传递给下回调函数 现在问题是,在回调函数中找不到原函数meta信 ...

  6. VS2010 LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    1嵌入清单问题 属性: 项目\属性\配置属性\清单工具\输入和输出\嵌入清单:原来是“是”,改成“否”. 项目\属性\配置属性\链接器\清单文件\生成清单:原来是“是”,改成“否”. 2文件老旧: c ...

  7. PCIE错误分析

    前面的文章提到过,PCI总线中定义两个边带信号(PERR#和SERR#)来处理总线错误.其中PERR#主要对应的是普通数据奇偶校检错误(Parity Error),而SERR#主要对应的是系统错误(S ...

  8. linux下查看动态链接库so文件的依赖的相关组建

    我们很多c程序在windows下是以dll形式展现的,在linux则是以so 形式展现的. windows一般不会因为编译dll文件的编译器版本不同而出先dll文件不能执行. 但是linux下,不同版 ...

  9. Left Join B表,只取B表一条记录

    --用OUTER APPLY select b.* FROM a表 a OUTER APPLY () * from b表 WHERE [Name] = a.[AName] ORDER BY BNo d ...

  10. SQLServer 中有五种约束, Primary Key 约束、 Foreign Key 约束、 Unique 约束、 Default 约束和 Check 约束

    一直在关注软件设计方面,数据库方面就忽略了很多,最近在设计数据库时遇到了一些小麻烦,主要是数据库中约束和性能调优方面的应用,以前在学习 Sql Server 2000,还有后来的 Sql Server ...