码迷,mamicode.com
首页 > 其他好文 > 详细

途牛banner自动轮播

时间:2016-08-03 01:21:06      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:

<!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></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="images/1.jpg" />

          <img src="images/1.jpg" />

          <img src="images/2.jpg" />

          <img src="images/3.jpg" />

          <img src="images/4.jpg" />

          <img src="images/5.jpg" />

          <img src="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自动轮播

标签:

原文地址:http://www.cnblogs.com/think90/p/5731244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!