html中banner怎么写,banner.html

body{

background-color: #f0f0f0;

}

ul{

padding: 0;

margin: 0;

}

li{

list-style: none;

}

img{

border:0;

}

.play{

width: 400px;

height: 430px;

margin: 50px auto 0;

background-color: #000;

font: 12px Arial;

}

.big_pic{

width: 400px;

height: 320px;

overflow: hidden;

background: #222;

position: relative;

}

.big_pic li{

width: 400px;

height: 320px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

z-index: 0;

}

.mark_left{

width: 200px;

height: 320px;

position: absolute;

left: 0;

top: 0;

filter:alpha(opacity:10);

opacity: 0.1;

z-index: 3000;

}

.mark_right{

width: 200px;

height: 320px;

position: absolute;

left: 200px;

top: 0;

filter:alpha(opacity:10);

opacity: 0.1;

z-index: 3000;

}

.big_pic .prev{

width: 60px;

height: 60px;

background: url("images/btn.gif")no-repeat;

position: absolute;

top: 130px;

left: 10px;

z-index: 3001;

filter:alpha(opacity:0);

opacity: 0;

cursor: pointer;

}

.big_pic .next{

width: 60px;

height: 60px;

background: url("images/btn.gif")no-repeat 0 0;

position: absolute;

top: 130px;

right: 10px;

z-index: 3001;

filter:alpha(opacity:0);

opacity: 0;

cursor: pointer;

}

.big_pic .text{

position: absolute;

left: 10px;

top: 302px;

z-index: 3000;

color: #ccc;

}

.big_pic .length{

position: absolute;

right: 10px;

bottom: 4px;

z-index: 3000;

color: #ccc;

}

.big_pic .bg{

width: 400px;

height: 25px;

background: #000;

filter:alpha(opacity:60);

opacity: 0.6;

position: absolute;

z-index: 2999;

bottom: 0;

left: 0;

}

.small_pic{

width: 380px;

height: 94px;

position: relative;

top: 7px;

left: 10px;

overflow: hidden;

}

.small_pic ul{

height: 94px;

position: relative;

top: 0;

left: 0;

}

.small_pic li{

width: 120px;

height: 94px;

float: left;

padding-right: 10px;

background: url("images/loading.gif")no-repeat center center;

cursor: pointer;

filter:alpha(opacity:30);

opacity: 0.3;

}

.small_pic img{

width: 120px;

height: 94px;

}

• 
• 
• 
• 
• 
• 

//获取非行内样式

var g_aImgInfo=

[

{info: "都市魅力"},

{info: "古香古色"},

{info: "沉浸舞步的舞者"},

{info: "名贵跑车"},

{info: "聆听天籁的精灵"},

{info: "绚彩光芒"}

];

function getStyle(obj, name) {

if (obj.currentStyle) {

return obj.currentStyle[name];

} else {

return getComputedStyle(obj, false)[name];

}

}

//运动框架

function startMove(obj, arr, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var cur = 0;

if (arr == 'opacity') {

cur = Math.round(parseFloat(getStyle(obj, arr)) * 100);

} else {

cur = parseInt(getStyle(obj, arr));

}

var speed = (iTarget - cur) / 6;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (cur == iTarget) {

clearInterval(obj.timer);

} else {

if (arr == 'opacity') {

obj.style.filter = 'alpha(opcity:' + (cur + speed) + ')';

obj.style.opacity = (cur + speed) / 100;

} else {

obj.style[arr] = cur + speed + 'px';

}

}

}, 30);

}

function getByClass(oParent, sClass) {

var aEle = oParent.getElementsByTagName('*');

var aResult = [];

for (var i = 0; i < aEle.length; i++) {

if (aEle[i].className == sClass) {

aResult.push(aEle[i]);

}

}

return aResult;

}

window.onload = function() {

var oDiv = document.getElementById('playimages');

var oBtnPrev = getByClass(oDiv, 'prev')[0];

var oBtnNext = getByClass(oDiv, 'next')[0];

var oMarkLeft = getByClass(oDiv, 'mark_left')[0];

var oMarkRight = getByClass(oDiv, 'mark_right')[0];

var oDivSmall = getByClass(oDiv, 'small_pic')[0];

var oTxtInfo = getByClass(oDiv, 'text')[0];

var oTxtLength = getByClass(oDiv, 'length')[0];

var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];

var aLiSmall = oDivSmall.getElementsByTagName('li');

var oUlBig = getByClass(oDiv, 'big_pic')[0];

var aLiBig = oUlBig.getElementsByTagName('li');

//为元素添加属性

oTxtInfo.innerHTML = g_aImgInfo[0].info;

console.log(g_aImgInfo[0].info);

oTxtLength.innerHTML = '1/' + aLiSmall.length;

var nowZIndex = 2;//全局变量用于控制zindex

var now = 0;//全局变量，当前图片的位置

oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';

//添加事件

oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {

startMove(oBtnPrev, 'opacity', 100);

};

oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {

startMove(oBtnPrev, 'opacity', 0);

};

oBtnNext.onmouseover = oMarkRight.onmouseover = function () {

startMove(oBtnNext, 'opacity', 100);

};

oBtnNext.onmouseout = oMarkRight.onmouseout = function () {

startMove(oBtnNext, 'opacity', 0);

};

for(var i=0;i

aLiSmall[i].index=i;

aLiSmall[i].οnclick=function(){

if(this.index==now) return;

now=this.index;

tab()

};

aLiSmall[i].onmouseover = function() {

startMove(this, 'opacity', 100);

};

aLiSmall[i].onmouseout = function() {

if (this.index != now) {

startMove(this, 'opacity', 30);

}

};

}

//通用事件

function tab(){

aLiBig[now].style.zIndex=nowZIndex++;

for(var i=0;i

startMove(aLiSmall[i],'opacity',30);

}

aLiBig[now].style.height=0;

startMove(aLiBig[now],'height',320);

startMove(aLiSmall[now],'opacity',100);

if(now==0){

startMove(oUlSmall,'left',0);

}else if(now==aLiSmall.length-1){

startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth);

} else {

startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);

}

oTxtInfo.innerHTML=g_aImgInfo[now].info;

oTxtLength.innerHTML=(now+1)+'/'+aLiSmall.length;

}

oBtnPrev.οnclick=function(){

now--;

if(now==-1){

now=aLiSmall.length-1;

}

tab();

};

oBtnNext.οnclick=function(){

now++;

if(now==aLiSmall.length){

now=0

}

tab();

};

//定时器

var timer=setInterval(oBtnNext.onclick,2000);

oDiv.οnmοuseοver=function(){

clearInterval(timer);

};

oDiv.οnmοuseοut=function(){

timer=setInterval(oBtnNext.onclick,2000);

};

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史