<!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. 详细讲解：通过composer安装TP5.1(Thinkphp5.1)

    现在TP5越来越火了,TP5也更新到了5.1版本,但是5.1以上版本只能通过composer来进行安装,那么这里贴出详细的步骤 前提:PHP版本必须要5.6以上 参考网址:http://www.thi ...

  2. 单步调试理解webpack里通过require加载nodejs原生模块实现原理

    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...

  3. javascript当中的无限分类

    var data = [ {id:100000, name :"1", pid :0}, {id:100100, name :"1-1", pid :10000 ...

  4. 【BZOJ1858】[SCOI2010] 序列操作（ODT裸题）

    点此看题面 大致题意: 给你一个\(01\)序列,让你支持区间赋值.区间取反.区间求和以及求一段区间内最多有多少连续的\(1\)这些操作. \(ODT\) 这道题正解似乎是线段树,但码量较大,而且细节 ...

  5. 2017.11.18 C语言的算法分析题目

    算法分析 1. 选定实验题目,仔细阅读实验要求,设计好输入输出,按照分治法的思想构思算法,选取合适的存储结构实现应用的操作. 2. 设计的结果应在Visual C++ 实验环境下实现并进行调试.(也可 ...

  6. MAC os x 系统java开发环境搭建教程

    https://jingyan.baidu.com/article/3d69c55147a3baf0cf02d7ca.html

  7. P1903 数颜色

    题目 带修莫队题. 在询问上多加一个变量,记录是在那次修改之后的. 然后暴力修改. 就没了. 不过有一些修改的小技巧 #include<cstdio> #include<algori ...

  8. HttpHandler(处理程序) 和 HttpModule(托管模块)

    本文参见:http://www.tracefact.net/Asp-Net/Introduction-to-Http-Handler.aspx 前言:前几天看到一个DTcms网站,里面有个伪静态技术, ...

  9. C# unchecked运算符

    一.C# unchecked运算符 unchecked运算符用于取消整型算术运算和转换的溢出检查. 二.提示 默认情况下,都是unchecked选项.因此,只有在需要把几个未检查的代码行放在一个明确标 ...

  10. javaScript校验图片大小、格式

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...