js前端开发实现banner轮播透明切换

网页轮播图前端开发工程师水平|前端开发 js幻灯片

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>前端开发 js幻灯片</title>
<style>
body,
p,
ul,
li,
ol,
dl,
dd,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6{
margin:0;
padding:0;
}
ul,
ol{
list-style:none;
}
a{
text-decoration:none;
}
img{
display:block;
border:none;
}
.clearfix{
zoom:1;
}
.clearfix:after{
display:block;
content:””;
clear:both;
}
#banner-box{
position:relative;
width:800px;
height:373px;
margin:30pxauto0;
overflow:hidden;
font-family:”微软雅黑”;
}
#bannerli{
position:absolute;
left:0;
top:0;
opacity:0;
filter:alpha(opacity=0);
}
#banner-boximg{
width:1024px;
height:373px;
}
#nav{
position:absolute;
right:80px;
bottom:20px;
z-index:2;
}
#navli{
float:left;
width:20px;
height:20px;
margin:06px;
border-radius:100%;
background:#935B5B;
color:#fff;
text-align:center;
line-height:20px;
font-size:12px;
cursor:pointer;
}
#navli.cur,
#navli:hover{
background:#E91E63;
}
#btndiv{
z-index:2;
position:absolute;
width:40px;
height:60px;
background:#5C2C2C;
top:155px;
opacity:.3;
filter:alpha(opacity=30);
text-align:center;
font-size:40px;
color:white;
cursor:pointer;
display:none;
}
.prev{
left:30px;
}
.next{
right:30px;
}
#banner-boxdiv{
display:block;
}
#banner-box:hoverdiv:hover{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<divid=”banner-box”>
<ulid=”banner”>
<li>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748pn3vheie1vczb81h.jpg”>
</li>
<li>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183747p6lx3ftx2xeewex2.jpg”>
</li>
<li>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748lxxuaea6fj1mhn6u.jpg”>
</li>
<li>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748nc7r2g4ki7jiht8h.jpg”>
</li>
</ul>
<ulid=”nav”>
<liclass=”cur”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<divid=”btn”>
<divclass=”prev”>&lt;</div>
<divclass=”next”>&gt;</div>
</div>
</div>
<script type=”text/javascript”>
varoBanner=document.getElementById(“banner”);
varaBannerLi=oBanner.getElementsByTagName(“li”);
varoNav=document.getElementById(“nav”);
varaNavLi=oNav.getElementsByTagName(“li”);
varoBtn=document.getElementById(“btn”);
varoPrev=oBtn.getElementsByTagName(“div”)[0];
varoNext=oBtn.getElementsByTagName(“div”)[1];
varoBannerBox=document.getElementById(“banner-box”);
vari=0;
aBannerLi[0].style.opacity=1;
aBannerLi[0].style.zIndex =1;
vartimer=setInterval(move,3000);//filter
for (varn=0;n<aBannerLi.length;n++) {
aBannerLi[n].index =n;
aBannerLi[n].onmouseover=function(){
console.log(this.index);
}
}
functionmove(){
clearInterval(timer);
i++;
for (varj=0;j<aBannerLi.length;j++) {
aBannerLi[j].style.zIndex =0;
startMove(aBannerLi[j],{
“opacity”:0
});
}
for (vark=0;k<aNavLi.length;k++) {
aNavLi[k].className =””;
}
if (i>=aBannerLi.length) {
i=0;
}
aNavLi[i].className =”cur”;
aBannerLi[i].style.zIndex =1;
startMove(aBannerLi[i],{
“opacity”:100
},clear);
}
functionclear(){
timer=setInterval(move,3000);
}
for (varm=0;m<aNavLi.length;m++) {
aNavLi[m].index =m;
aNavLi[m].onclick=function(){
i=this.index -1;
move();
}
}
oPrev.onclick=function(){
if (i==0) {
i=aBannerLi.length -2;
}else{
i=i-2;
}
move();
}
oNext.onclick=function(){
move();
}
functiongetStyle(obj,attr){
if (obj.currentStyle) {
returnobj.currentStyle[attr]
}else{
returngetComputedStyle(obj,false)[attr]
}
}
functionstartMove(obj,json,fnEnd){
varMAX=18;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varbStop=true;
for (varnameinjson) {
variTarget=json[name];
if (name==’opacity’) {
varcur=Math.round(parseFloat(getStyle(obj,name)) *100);
}else{
varcur=parseInt(getStyle(obj,name));
}
varspeed= (iTarget-cur) /8;
speed=speed>0?Math.ceil(speed) :Math.floor(speed);
if (Math.abs(speed) >MAX) speed=speed>0?MAX:-MAX;
if (name==’opacity’) {
obj.style.filter=’alpha(opacity:’+ (cur+speed) +’)’;
obj.style.opacity= (cur+speed) /100;//ff chrome
}else{
obj.style[name] =cur+speed+’px’;
}
if (cur!=iTarget) {
bStop=false;
}
}
if (bStop) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd();
}
}
},10);
}
</script>
</body>
</html>
前端js开发规范|前端开发和javascript
» 本文来自:前端开发者 » 《js前端开发实现banner轮播透明切换》
» 本文链接地址:https://www.rokub.com/3508.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!