<!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. Win10技巧：使用“照片”应用剪辑视频、添加特效

    Win10内置了很多实用的应用,你不仅可以通过“Win键+G”快速录制电脑屏幕,如软件操作.游戏界面等,你还可以利用“照片”应用来对视频进行快速的剪辑,把录制前后多余的内容去除,同时你也可以对游戏中的 ...

  2. 建堆复杂度O(n)证明

    堆排序中首先需要做的就是建堆,广为人知的是建堆复杂度才O(n),它的证明过程涉及到高等数学中的级数或者概率论,不过证明整体来讲是比较易懂的. 堆排过程 代码如下 void print(vector&l ...

  3. 如何在win10中安装ArcGIS10.2

    在win10中安装ArcGIS10.2,完美兼容,下面将自己在win10界面下的安装方法给大家分享一下. 工具/原料   win10环境 ArcGIS10.2安装包, 安装包地址链接: 链接: htt ...

  4. 是否应该提供一个dao.insertIgnoreNull ？ （像updateIgnoreNull一样）

     是否应该提供一个dao.insertIgnoreNull ? (像updateIgnoreNull一样)  发布于 406天前  作者 SayingCode  153 次浏览  复制  上一个帖子  ...

  5. logistic regression （逻辑回归） 概述

    :http://hi.baidu.com/hehehehello/blog/item/0b59cd803bf15ece9023d96e.html#send http://en.wikipedia.or ...

  6. OpenMP常用函数

    1.设置线程数目 定义如下: void omp_set_num_threads(int num_threads); 通过该函数来指定其后用于并行计算的线程数目,其中参数num_threads就是指定的 ...

  7. python之字典的书写

    python之字典 1.字典的说明定义:字典是另一种可变容器模型,且可存储任意类型对象,他是由key:value键值对组成的. 2.字典的代码2.1.字典的定义 >>> a = di ...

  8. springMVC入门一

    一.准备工作 eclipse使用maven搭建项目,项目名称为HelloSpringMVC 二.搭建好的项目如下: 项目介绍:实现简单的helloworld 三.具体代码 controller类:He ...

  9. JS之执行上下文

    执行上下文(execution context),是JS中的一个很重要的概念.它对于我们理解函数定义,执行时都做了什么有着很大的意义.理解它我们才能明白我们常说的函数声明提升,作用域链,闭包等原理. ...

  10. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...