用HTML和JS制作腾讯视频首页,仿腾讯视频轮播电脑版首页

最新推荐文章于 2024-09-10 08:11:32 发布

转载最新推荐文章于 2024-09-10 08:11:32 发布 · 2.2k 阅读

标签

#用HTML和JS制作腾讯视频首页

本文展示了如何使用HTML、CSS和JavaScript来创建一个类似腾讯视频首页的轮播效果。通过CSS实现基本样式，JavaScript实现自动切换、导航条高亮以及左右切换功能。代码中详细注释了每个部分的作用，适用于初学者学习。

HtmlCssJs

/*reset css*/

* {

margin:0;

pn:0;

padding:0;

list-style:none;

border:0;

}

/*demo css*/

.i_box {

position:relative;

overflow:hidden;

width:100%;

height:350px;

margin:0px auto 0 auto;

}

.i_imglist {

width:100%;

height:350px;

z-index:0

}

.i_imglist li img {

width:100%;

height:350px;

display:block

}

.i_nav {

position:absolute;

right:116px;

bottom:0;

overflow:hidden;

width:220px;

height:300px;

z-index:2;

}

.i_nav ul li {

float:left;

background-color:#fff;

background-color:rgba(255,255,255,.9);

width:220px;

height:35px;

margin:0 1px;

opacity:0.9;

filter:alpha(opacity=50);

text-align:center;

line-height:30px;

cursor:pointer;

}

.i_nav ul li.hover {

background-color:#ff6428;

opacity:0.8;

filter:alpha(opacity=80)

}

.i_nav ul li a {

color:#000;

text-decoration:none

}

.i_nav ul li.hover a {

color:#fff

}

.i_prev a,.i_next a {

position:absolute;

overflow:hidden;

width:19px;

height:30px;

background-color:#000;

color:#fff;

text-align:center;

font-weight:bold;

opacity:0.9;

filter:alpha(opacity=90);

text-decoration:none;

line-height:30px

}

.i_prev a {

left:0;

bottom:0

}

.i_next a {

right:0;

bottom:0

}

.i_prev a:hover,.i_next a:hover {

background-color:#fff;

opacity:0.8;

filter:alpha(opacity=80);

color:#000

}

$(function() {

var imgField = $('#J_imgList');

var imgList = $('#J_imgList>li');

var navField = $('#J_navList');

var navList = $('#J_navList>li');

var btnPrev = $('#J_prev');

var btnNext = $('#J_next');

var turnPage = 4; //每屏显示数

var T = 500; //切换间隔时间

var turnT = 300; //animate时间

var N = 0; //图片初始索引

var P = 1; //屏初始索引

var goFun = null;

var hoverFun = null;

var triggerFun = null;

var delayFun = null

var navListW = navList.outerWidth(true);

var turnPages = Math.ceil(navList.size() / turnPage);

//初始图片区域高度与标题区域宽度

imgField.height(imgList.size() * imgList.height());

//初始自动切换

GO();

//自动切换

function GO() {

}

//停止切换

function STOP() {

clearTimeout(goFun);

}

//标题划过移出

navList.hover(function() {

clearTimeout(delayFun);

STOP();

N = navList.index(this);

imgField.stop().animate({

marginTop: -N * (imgList.height())

}, turnT);

$(this).addClass('hover').siblings().removeClass('hover');

}, function() {

N++;

delayFun = setTimeout(GO, T)

});

//图片划过移出

imgList.hover(function() {

N = imgList.index(this);

navList.eq(N).trigger('mouseover');

}, function() {

navList.eq(N).trigger('mouseleave');

});

//左切换

btnPrev.click(function() {

if (P == 1) {

navField.animate({

marginLeft: -turnPage * navListW * (turnPages - 1) + 'px'

}, turnT);

P = turnPages;

} else {

STOP();

P--;

navField.animate({

marginLeft: -turnPage * navListW * (P - 1) + 'px'

}, turnT);

}

navList.eq((P - 1) * turnPage).trigger('mouseover');

GO();

});

//右切换

btnNext.click(function() {

if (P == turnPages) {

navField.animate({

marginLeft: 0

}, turnT);

P = 1;

} else {

STOP();

P++;

navField.animate({

marginLeft: -turnPage * navListW * P + 'px'

});

}

navList.eq((P - 1) * turnPage).trigger('mouseover');

GO();

});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.7.2