js-图片轮播(极简)
<!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-图片轮播(极简)的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- js 图片轮播（一）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
- angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
随机推荐
- 返回 字符串的 form和js组合让页面跳转
router.get("/wy/jhy").handler(ctx->{ ctx.request().response().setChunked(true); System. ...
- VS2017上使用RDLC Report
1,要先在“工具”-“扩展与更新”中搜索“RDLC"进行安装.(出来的结果有两个,安装第一个有三个星评分的,第二个是没评分的) 2,在NuGet包管理器中搜索”reportviewercon ...
- python包的一些问题
1查看python包的版本 2 卸载包的方法 3指定python包的安装版本 参考网址 https://blog.csdn.net/colourful_sky/article/details/8018 ...
- Linux驱动之USB总线驱动程序框架简析
通用串行总线(USB)是主机和外围设备之间的一种连接.USB总线规范有1.1版和2.0版,当然现在已经有了3.0版本.USB1.1支持两种传输速度:低速为1.5Mbps,高速为12Mbps.USB2. ...
- QTcpSocket 相关知识总结
1. 连接服务器 m_tcpSocket->connectToHost("127.0.0.1", 9877); connected = m_tcpSocket->wa ...
- OO第二单元小结
OO第二单元小结 一.三次作业代码分析. 1.第一次作业 第一次作业是单部电梯的傻瓜调度,由于其过分傻瓜,所以第一次作业我只有两个类,一个main,一个电梯,main类负责不断从输入流中读取命令,如果 ...
- RT-thread-------------------信号量
信号量:用于解决线程间同步问题的内核对象,线程可以获取或释放它,从而达到同步或互斥的目的.(互斥量只能由持有线程释放,而信号量则可以由任何线程释放) 在rtt中,信号量分为计数型信号量和二值信号量(作 ...
- mysqlGTID主从配置
GTID主从简介 GTID是基于mysql生成的事务ID,由服务器ID和事务ID组成. 这个ID在主库及从库上都是唯一的. 这个特性可以让mysql的主从复制变得更加简单,一致性更加可靠. GTID优 ...
- c语言基础课第一次作业
1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 通过阅读邹欣老师的博客,了解到了老师心中理想的师生关系是(健身教练与健身学员).在初中,高中我们一直都是填鸭式教育,像 ...
- ThinkPhp5 出现访问出现 No input file specified. 问题
今天复习一下ThinkPhp5,在官网下载了核心版,windows下配置了虚拟域名之后出现了神奇的现象 如下图 直接访问域名能访问到index模块下的index控制器下的index方法 但是我输入完整 ...