<!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. phpStudy-FTP_Server插件安装使用教程

    FileZilla Server使用教程 ftp server安装教程 除了phpStudy for IIS外其他版本phpStudy不再集成ftp server外. phpStudy for IIS ...

  2. BestCoder Round #91 1001 Lotus and Characters

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6011 题意: Lotus有nn种字母,给出每种字母的价值以及每种字母的个数限制,她想构造一个任意长度的 ...

  3. 2017.11.7 JavaWeb------Servlet过滤器

    JavaWeb------Servlet过滤器 (1)过滤器是web服务器上的组件,它们对客户和资源之间的请求和响应进行过滤.Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响 ...

  4. java并发多线程（摘自网络）

    1. 进程和线程之间有什么不同? 一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是一个包含了不同的类和 ...

  5. 九九乘法表（Python实现）

    a = 1 #while实现 while a: b = 1 while b: print(str(b)+'*'+str(a),end='=') print(a*b,end=' ') if b == a ...

  6. JavaScript 十行原生代码实现复制内容到剪贴板

    十行原生代码,不引入任何 JS 库,目前大部分浏览器与移动平台都可兼容. function copyToClipboard(value, callback) { var textarea = docu ...

  7. vue 用户输入搜索 与无限下拉

    vue项目中,用户输入关键字搜索,并且手机端做无限下拉 watch: { 'getListForm.searchKey'(val) { this.radioChange(); // 还有其他逻辑,内部 ...

  8. 洛谷P1437 [HNOI2004]敲砖块(dp)

    题目背景 无 题目描述 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖 都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 ...

  9. JIRA 6.3的那些事（1）：linux环境安装

    一直以来,自认为对JIRA是还算比较熟悉 从3.x 就开始使用,然后用4.x 近期公司对BUG系统进行选型: 我极力推荐JIRA  ! 然后,JIRA 的安装.部署.配置任务就给到我了: 本以为应该是 ...

  10. Golang反射机制

    Go反射机制:在编译不知道类型的情况下,可更新变量.在运行时查看值.调用方法以及直接对它们的布局进行操作. 为什么使用反射 有时需要封装统一接口对不同类型数据做处理,而这些类型可能无法共享同一个接口, ...