<!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. April 15 2017 Week 15 Saturday

    Attitude is a little thing that makes a big difference. 小态度,大不同. Attitudes can make a big difference ...

  2. kinectV2平面检测

    最近做一个关于kinect的东西,主要是在RGB图上提取指定的平面.对于kinect也是刚刚接触不是很熟悉,捣鼓了两天做了很粗糙的东西,但是也学到了一些东西,所以记录一下. 思路大概就是: 在RGB中 ...

  3. Selenium入门9 上传文件

    上传文件步骤 1 找到文件上传的input标签  find_element_by_css_selector("input[type='file']") 2 用send_keys传入 ...

  4. hdu-3015 Disharmony Trees---离散化+两个树状数组

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3015 题目大意: 有一些树,这些树的高度和位置给出.现在高度和位置都按从小到大排序,对应一个新的ra ...

  5. 【HDU4676】Sum Of Gcd（莫队+欧拉函数）

    点此看题面 大致题意: 多组询问,求\(\sum_{i=L}^R\sum_{j=i+1}^Rgcd(i,j)\). 推式子 这道题我们可以考虑,每个因数\(d\)被统计答案的次数,肯定与其出现次数有关 ...

  6. 问题 A: xiaoping学构造函数

    题目描述 xiaoping刚接触类的构造和析构函数,对于构造函数的编写比较困惑.zhuangzhuang给小平布置了一道题目,xiaoping苦思两天也无法解答,请你帮帮xiaoping吧. #inc ...

  7. centos 6.5 配置nginx环境

    1.卸载系统中默认的php和httpd [root@x ~]# yum remove httpd* php* Loaded plugins: fastestmirror Setting up Remo ...

  8. Strut2 的 Action获取JSP 页面参数的方法

    struts2 Action获取表单传值1.通过属性驱动式JSP:<form action="sys/login.action" method="post" ...

  9. 修改第三方库内容，carsh提示"image not found"

    在图示位置把提示的东西加上即可 参考: iOS app with framework crashed on device, dyld: Library not loaded, Xcode 6 Beta ...

  10. react事件绑定的三种常见方式以及解决Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state问题思路

    在 React 组件中,每个方法的上下文都会指向该组件的实例,即自动绑定 this 为当前组件. 而且 React 还会对这种引用进行缓存,以达到 CPU 和内存的优化.在使用 ES6 classes ...