途牛banner自动轮播
<!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>
<
</p>
<p class=btnRight>
>
</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自动轮播的更多相关文章
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- 讲解版的自动轮播（新手福利）样式和js就不分离了为了看的方便
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- banner无缝轮播【小封装】
转载:http://www.qdfuns.com/notes/23446/d1691a1edf5685396813cc85ae6ab10f.html 一直在重复的写banner,写了了好几个,然后每次 ...
- banner图片轮播
html部分 版本号 <script src="http://www.jq22.com/jquery/jquery-1.10.2 ...
- JS: 图片轮播模板——左右移动，点击编码移动，自动轮播
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 使用ViewPager实现自动轮播
很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanch ...
- ViewPager自动轮播
Android使用ViewPager实现左右循环滑动及轮播效果 ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...
- jQuery实现选项联动轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 关于Java虚拟机内存原型的基本知识
Java虚拟机内存原型的六个部分: 1.寄存器:我们在程序中无法控制 2.栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3.堆:存放用new产生的数据 4.静态域:存放在 ...
- 出现Permission denied的解决办法
出处 https://blog.csdn.net/qq_16525279/article/details/80245350 提示 Permission denied 解决的办法: $ sudo chm ...
- Windows聚焦转为图片
1.windows聚焦图片目录路径: C:\Users\Er\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1 ...
- user(),current_user()函数的区别
user() 表示当前的登录用户 current_user() 表示对应于mysql.user表里对应的账号.
- theano提示:g++ not detected的解决办法
导入theano包后出现如下警告: WARNING (theano.configdefaults): g++ not detected ! Theano will be unable to execu ...
- keyframes 放大缩小动画
本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...
- 旧文备份:在CANopen网络中通过LSS服务设置节点地址和网络波特率
CANopen专有个子协议用来描述怎样去通过网络设置节点地址和波特率,就是CiA DSP-305,大伙都叫LSS协议,是Layer Setting Services的缩写,不太好翻译,可以叫底层设置服 ...
- System.Web.Caching.Cache
此类是利用缓存来保存信息的.可以把一些稳定的数据,不会随用户而改变的信息利用Cache保存起来,可以优化网站的速度. Cache辅助类已上传:GitHub Cache和Session,cookie的区 ...
- machine learning学习笔记
看到Max Welling教授主页上有不少学习notes,收藏一下吧,其最近出版了一本书呢还,还没看过. http://www.ics.uci.edu/~welling/classnotes/clas ...
- 一篇RxJava友好的文章（二）
上一篇文章介绍了rxjava的基本用法,和一些常用的操作符,以及rxjava的链式操作带来的好处.由于rxjava非常的强大,让我如此的痴迷,我打算写五篇文章,专门讲解rxjava 常见的操作符和用法 ...