<!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>

&lt

</p>

<p class=btnRight>

&gt

</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自动轮播的更多相关文章

  1. 网站banner无缝轮播

    网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  3. 讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便

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

  4. banner无缝轮播【小封装】

    转载:http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html 一直在重复的写banner,写了了好几个,然后每次 ...

  5. banner图片轮播

    html部分                           版本号   <script src="http://www.jq22.com/jquery/jquery-1.10.2 ...

  6. JS: 图片轮播模板——左右移动，点击编码移动，自动轮播

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

  7. 使用ViewPager实现自动轮播

    很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanch ...

  8. ViewPager自动轮播

    Android使用ViewPager实现左右循环滑动及轮播效果   ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...

  9. jQuery实现选项联动轮播

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

随机推荐

  1. 运用Hadoop能否搭建完整的云计算平台?

    Apache Hadoop 是一个用java语言实现的软件框架,在由大量计算机组成的集群中运行海量数据的分布式计算,它可以让应用程序支持上千个节点和PB级别的数据. Hadoop并不完全代表云计算,所 ...

  2. 51Nod 1600 Simple KMP SAM+LCT/树链剖分

    1600 Simple KMP 对于一个字符串|S|,我们定义fail[i],表示最大的x使得S[1..x]=S[i-x+1..i],满足(x<i)显然对于一个字符串,如果我们将每个0<= ...

  3. C4C销售订单中业务伙伴的自动决定功能Partner determination procedure

    例子:我新建一个Sales Order,account 字段选择ID为1001的Account:Porter LLC 创建成功后,观察这个Sales Order的Involved Party里,Bil ...

  4. less通用pc移动库

    // less 文件 (移动端通用less文件) // 作者 marchen // 时间 2014/9/1 // 协议 MIT // 只考虑webkit内核手机浏览器和火狐内核浏览器 // 自定义le ...

  5. MySQL一致性非锁定读

    一致性非锁定读(consistent nonlocking read)是指InnoDB存储引擎通过多版本控制(multi versionning)的方式来读取当前执行时间数据库中行的数据,如果读取的行 ...

  6. Java 截屏工具类

    PrintScreenUtils.java package javax.utils; import java.awt.AWTException; import java.awt.Dimension; ...

  7. 原生Servlet 上传文件

    依赖jar <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons ...

  8. [P1363] 幻想迷宫

    题目链接 很好的一道搜索题,应该是利用了离散化的思想我好蒟蒻呀 地图是根据给定的图无限的拼接的. 所以说暴力建图是不可取的. 其实不难看出,在跨越两张图时.我们就可以看做这个点时空穿梭一般.从底下回来 ...

  9. ajax实现分页页签

    在一些搜索列表的页面中,我们会遇到一些需要处理页签的需求,一般这样的页面,要么是在JSP中处理,每次都跳页.这样做是个很方便的方法.但是如果页面上有很多和列表无关,每次都需要重新渲染是不是显得慢了一些 ...

  10. git移除某文件夹的版本控制

    thinkphp框架,Apps/Runtime下目录移出版本控制. git rm -r -n --cached  */Runtime/\*      //-n:加上这个参数,执行命令时,是不会删除任何 ...