仿腾讯视频轮播电脑版首页

浏览：2409次- 评论：0次- 发布时间：2018-06-27

Html

Css

/*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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：仿腾讯视频轮播pc版首页

鼠标经过切换轮播图，不用点击，高端首页视频轮播插件

需要几张图片就加多少个代码

<li><a href="/"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt="" title="" /></a></li>
<li><a href="/">往事</a></li>

简单不？

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取