途牛banner自动轮播
<!DOCTYPE html> <!--申明文档类型:html-->
<html lang="en"> <!--html 根标签 lang:language--en:english--'zh-CN'中文简体-->
<head>
<meta charset="UTF-8">
<meta name=“Generator“ content="Editplus"> <!--字符集:UTF-8BI编码-->
<meta name="Author" content="千寻"> <!--作者-->
<meta name="Keywords" content="途牛"> < --描述-->
<meta name="Desription" content="途牛......."> <--网页标题-->
<title>途牛banner自动轮播</title>
<!--css层叠样式 修饰,美化 网页-->
<style>
*{/*通配符*/
margin:0px;/*外边距*/
padding:0px;/*内边距*/
}
body{backround:url('imges/bg.jpg'); /*背景*/}
#box{
padding:10px;/*内边距*/
width:100px;/**宽:100像素/
height:100px;/*高*/
border:1px solid red;/*边框:边框大小 实线颜色*/}
margin:100px auto; /*外边距:顶部距离 自动水平居中*/
position:relative;/*定位:相对定位 参照物*/
cursor:pointer;
}
#box img{
position:absolute;
top:0px;
left:0px;
opacity:0; /*透明度*/
}
#box img.firstImg{
opacity:1;
}
#box ul{
position:abolute;
list-style:none; /*列表风格:无*/
border:1px solid red;
left:4px;
bottom:15px; /**/
}
#box ui li{
background:rgb(255,255,255);
width:119px;
height:30px;
margin:1px;
text-align:center; /*文字对齐方式:水平居中*/
line-height:30px; /*行高*/
float:left; /*左浮动 向下排列变成向右排列*/
/*rgba(0-255,0-255,0-255,0-1)*/
a-alpha 透明度
a:0完全透明
1完全不透明
}
#box ul li.firstBtn{
background:rgba(0,0,0,0.7);
color:#fff;
}
#box p{
height:100px;
width:65px;
background:rgba(0,0,0,0.5);
position:absolute;
color:white;
font-size:70px;/*字体大小*/
text-align:center;
line-height:100px;
top:125; /*参考对象的一半*/
}
#box .btnLeft{
left:10px;
}
#box .btnRight{
right:10px;
}
</style>
<body> <!--网页主体:结构 可视化区域-->
<div id="box"> <!---id命名唯一性(身份证)->
<img class=firstImg src="data:images/1.jpg" />
<img src="data:images/1.jpg" />
<img src="data:images/2.jpg" />
<img src="data:images/3.jpg" />
<img src="data:images/4.jpg" />
<img src="data:images/5.jpg" />
<img src="data:images/6.jpg" />
<!--无需列表标签-->
<ul>
<li class=firstBtn>端午节快乐</li>
<li></li>
<li></li>
</ul>
<!--class类命名-->
<p class=btnLeft>
<
</p>
<p class=btnRight>
>
</p>
</div>
</body>
<!--写入js-->
<script>
//在文档去获取多个元素—通过标签名(”标签名”)
var aBtn=document.getElementsByTagName("li");
var aImg=document.getElementByTagName("img");
var num=0;
var oldBtn=aBtn[0];
oldBtn.className='firstBtn';
var oldImg=aImg[0];
oldImg.className='firstIng';
for(i=0;i<6;i++){
aBtn[i].index=i;自动属性(值)
aBtn[i].onclick=function(){
//this指的是谁触发了次函数,this就指向谁
num=this.index;
oldBtn.className='';
oldBtn=aBtn[num];//更新oldBtn
aBtn[num].className='firstBtn';//添加class类名
oldImg.className='';
oldImg=aImg[this.index];
aImg[num].className='firstImg';/点击哪个图表,显示哪个图片/
}
}
var timer
for(i=0;i<6;i++){
aBtn[i].index;
aBtn[i].onclick=function(){
clearInterval(timer)//清除计时器
num=this.index;
run();
}
}
//核心
function run(){
oldBtn.className='';
oldBtn=aBtn[num];//更新oldBtn
aBtn[num].className='firstBtn';//添加class类名
oldImg.className='';
oldImg=aImg[num];
aImg[num].className='firstImg';/点击哪个图表,显示哪个图片/
}
timer=setInterval(function
{num++;
if(num==6{num=0;} //==判断,=赋值
run();
},1000)//每隔1秒执行一次function(){}
</script>
</html>
途牛banner自动轮播的更多相关文章
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- 讲解版的自动轮播(新手福利)样式和js就不分离了为了看的方便
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- banner无缝轮播【小封装】
转载:http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html 一直在重复的写banner,写了了好几个,然后每次 ...
- banner图片轮播
html部分 版本号 <script src="http://www.jq22.com/jquery/jquery-1.10.2 ...
- JS: 图片轮播模板——左右移动,点击编码移动,自动轮播
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 使用ViewPager实现自动轮播
很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanch ...
- ViewPager自动轮播
Android使用ViewPager实现左右循环滑动及轮播效果 ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- js从入门到精通到深入到就业
本篇博客是我参看人家代码做的总结,个人感觉非常非常好,简单.步步深入,不用花大量时间来学完正本js,只需要把其中的代码理解透彻,上班无压力(上班无压力是指js部分,包括查看框架源代码都有很大帮助) / ...
- java 网络流 TCP/UDP
一.ServerSocket java.lang.Object |-java.net.ServerSocket 有子类SSLServerSocket. 此类实现服务器套接字.服务器套接字等待请求通过网 ...
- UESTC 757 棋盘
虽然是水题,但是还是很interesting的.(大概就是我最晚出这个题了... 博弈感觉就是靠yy能力啊.这题是对称性. 最后的必败态是白色格子对称的,一旦对称形成,对手怎么选,跟随就好,对手无法摆 ...
- 字符串处理(POJ1782)
题目链接:http://poj.org/problem?id=1782 解题报告: #include <iostream> #include <cstdio> #include ...
- R 语言爬虫 之 cnblog博文爬取
Cnbolg Crawl a). 加载用到的R包 ##library packages needed in this case library(proto) library(gsubfn) ## Wa ...
- 大数据(1)初始hadoop
1.hadoop模型如下: (上图为Hadoop1.x的布局) (Hadoop2.x较Hadoop1.x,多了YARN) Hadoop框架,是一个庞大的生态系统. 或者我们可以这样理解: 可以把整个体 ...
- P1242 新汉诺塔(hanio)
这道题加深了hanio的理解 如果我们要移动第n个盘子.那么就是说,n+1以后(包括n+1)的盘子都已经到位了 #include<iostream> #include<cstdio& ...
- kernighan lin算法
这个算法主要用在网络节点的分割.他的思想是将一个网络节点图分割成两个相等的节点集合.为了连接两个社区的边权最小. step1:随机产生两个节点的集合A和B. step2:计算A和B中的每个节点的int ...
- Large-scale Scene Understanding (LSUN)
Large-scale Scene Understanding (LSUN) http://lsun.cs.princeton.edu/#organizers http://sunw.csail.mi ...
- C#+Winform开发窗体程序
学习笔记 第一章:winform基础 一.概述 1.Windows Form(简称WinForm) 是微软.NET平台下用于开发"图形界面"应用程序的组件. 2.C/S架构 客户机 ...