二、原生JS实现优酷会员首页动态切换轮播图

最新推荐文章于 2021-06-04 07:03:58 发布
最新推荐文章于 2021-06-04 07:03:58 发布
阅读量592 收藏 3
点赞数 2
分类专栏： 前端小项目 文章标签： html css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47516343/article/details/108719064
版权

内容概览

优酷会员首页

一、效果图（完整效果参见源码）

在这里插入图片描述

二、源码

（一）HTML文档（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优酷会员首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
    <base target="_blank">  
</head>
<body>
    <!-- wrapperTop -->
    <div class="wrapperTop">
        <div class="topNavBox">
            <!-- topNav -->
            <div class="topNav clearfix">
                <div class="topNavLeft fl">
                    <a href="#" target="_self" class="logo"><img src="images/youku_vip_logo.png" alt="优酷vip会员"></a>
                    <ul class="list_two">
                        <li>
                            <a href="#"><span class="iconfont icon_01">&#xe613;</span>首页</a>
                        </li>
                        <li>
                            <a href="#"><span class="iconfont">&#xe61c;</span>频道</a>
                        </li>
                    </ul>
                </div>
        
                <div class="topNavRight fr">
                    <ul class="list_four">
                        <li>
                            <a href="#">
                                <span class="iconfont">&#xe710;</span>
                                <p>关注</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont">&#xe506;</span>
                                <p>记录</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont">&#xe657;</span>
                                <p>上传</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont">&#xe60d;</span>
                                <p>客户端</p>
                            </a>
                        </li>
                    </ul>
        
                    <div class="userIcon">
                        <!-- 未登录 -->
                        <!-- <div class="user"><img src="images/user_icon_default.png" alt=""></div> -->

                        <!-- 已登录 -->
                        <div class="user"><img src="images/user_icon.png" alt=""></div>
                        <div class="hg"><img src="images/huangguan_v1.png" alt=""></div>
                    </div>
                </div>
        
                <div class="searchContent">
                    <form action="">
                        <input type="text" name="content">
                        <button type="submit">搜全网</button>
                    </form>
                </div>
            </div>
        </div>
    
        <!-- bannerBox -->
        <div class="bannerBox">
            <!-- banner -->
            <ul class="banner clearfix">
                <li class="show">
                    <a href="#"><img src="images/banner_01.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_02.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_03.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_04.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_05.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_06.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_07.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/banner_08.png" alt=""></a>
                </li>
            </ul>

            <!-- bannerNavBox -->
            <div class="bannerNavBox">
                <!-- bannerNav -->
                <ul class="bannerNav clearfix">
                    <li class="active">鹤唳华亭</li>
                    <li>热爱</li>
                    <li>速度与激情：特别行动</li>
                    <li>被点亮的星球</li>
                    <li>漫长的告别</li>
                    <li>演技派片场记</li>
                    <li>大地私宴</li>
                    <li>攀登者</li>
                </ul>
            </div>

            <!-- vipRight -->
            <div class="vipRight">
                <div class="user">
                    <!-- 未登录 -->
                    <!-- <button>立即登录</button> -->

                    <!-- 已登录 -->
                    <div class="userIcon"></div>
                    <div class="userName">Hi stage拼途<img src="images/huangguan_v1.png" alt=""></div>
                    <div class="userVip">VIP会员<span>2019-12-17 到期</span></div>
                </div>

                <div class="info">
                    <div class="title">VIP 会员特权</div>
                    <div class="content">
                        <a href="#">广告特权</a>
                        <a href="#">院线新片</a>
                        <a href="#">尊贵标识</a>
                        <a href="#">独家特供</a>
                    </div>
                </div>

                <div class="pay">
                    <button>立即续费</button>
                </div>
                
                <div class="bottomBox">
                    <a href="#">我的账户</a>
                    <a href="#">激活会员卡</a>
                </div>
            </div>
        </div>
    </div>

    <!-- middlerBar -->
    <div class="middlerBar clearfix">
        <div class="channels fl">
            <div class="title">频道</div>
            <div class="allChannels">
                <div class="channelGroup">
                    <a href="#">电影</a>
                    <a href="#">纪录片</a>
                </div>
                <div class="channelGroup">
                    <a href="#">剧集</a>
                    <a href="#">德云社</a>
                </div>
                <div class="channelGroup">
                    <a href="#">动漫</a>
                    <a href="#">E!ZONE</a>
                </div>
            </div>
        </div>
        <div class="splitBorder fl"></div>
        <div class="tags fl">
            <div class="titleBox">
                <div class="title">分类</div>
                <a href="#">全部></a>
            </div>
            <div class="allTags">
                <div class="tagsGroup">
                    <a href="#">最热</a>
                    <a href="#">恐怖</a>
                </div>
                <div class="tagsGroup">
                    <a href="#" class="stress">最新</a>
                    <a href="#">爱情</a>
                </div>
                <div class="tagsGroup">
                    <a href="#">好评</a>
                    <a href="#">武侠</a>
                </div>
                <div class="tagsGroup">
                    <a href="#">内地</a>
                    <a href="#">犯罪</a>
                </div>
                <div class="tagsGroup">
                    <a href="#">北美</a>
                    <a href="#">悬疑</a>
                </div>
                <div class="tagsGroup">
                    <a href="#">香港</a>
                    <a href="#">惊悚</a>
                </div>
            </div>
        </div>
        <div class="promotion fr">
            <a href="https://v.youku.com/v_show/id_XNDM0OTg1MDAyOA==.html?spm=a2h03.12024492.app.5~5!4~5!4~A&scm=20140693.0-0.444_82448_0.0&descm=20140693.0-0.444_82448_0.0"></a>
        </div>
    </div>

    <!-- hotDrawer -->
    <div class="hotDrawer">
        <div class="basicTitle">
            <div class="drawerTitle"><span>VIP</span>正在热播</div>
            <span class="rightChange">换一换</span>
        </div>

        <div class="hotList clearfix">
            <div class="hotWindow fl">
                <div class="hotPlayWindow">
                    <img src="images/hotList/hotPlayWindow_bg.png" alt="" title="此处待插入视频！">
                </div>
                <ul class="hotPlayList">
                    <li class="hotPlayList_active">鹤唳华亭</li>
                    <li>第二次也很美</li>
                    <li>大明风华</li>
                    <li>漫长的告别</li>
                    <li>热爱</li>
                    <li>蒙面唱将猜猜猜 第四季</li>
                </ul>
            </div>

            <div class="itemListBox fl">
                <div class="itemListOne">
                    <a href="#" class="itemImg"><img src="images/hotList/itemListOne_01.png" alt=""></a>
                    <div class="itemMark">VIP</div>
                    <div class="itemScore"><i>9</i>.9</div>
                    <div class="itemName"><a href="#">归还世界给你</a></div>
                    <div class="itemDisc">杨烁娜扎虐恋情深</div>
                </div>
                <div class="itemListOne">
                    <a href="#" class="itemImg"><img src="images/hotList/itemListOne_02.png" alt=""></a>
                    <div class="itemMark">YIP</div>
                    <div class="itemScore"><i>9</i>.9</div>
                    <div class="itemName"><a href="#">外交风云</a></div>
                    <div class="itemDisc">展现新中国外交历程</div>
                </div>
                <div class="itemListOne">
                    <a href="#" class="itemImg"><img src="images/hotList/itemListOne_03.png" alt=""></a>
                    <div class="itemMark">独播</div>
                    <div class="itemScore"><i>9</i>.9</div>
                    <div class="itemName"><a href="#">叫我僵小鱼 日常篇 第三季 青春鱼你</a></div>
                    <div class="itemDisc">僵小鱼校园奇遇记</div>
                </div>
                <div class="itemListOne">
                    <a href="#" class="itemImg"><img src="images/hotList/itemListOne_04.png" alt=""></a>
                    <div class="itemMark">VIP·半价</div>
                    <div class="itemScore"><i>8</i>.8</div>
                    <div class="itemName"><a href="#">少年的你</a></div>
                    <div class="itemDisc">易烊千玺屏幕首秀</div>
                </div>
            </div>
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>

    <script src="js/index.js"></script>
</body>
</html>

（二）CSS文档（index.css）

@import 'reset.css';
@import 'wrapperTop.css';
@import 'middleBar.css';



.hotDrawer {
    height: 395px;
    margin-top: 40px;
}
.hotDrawer .basicTitle {
    width: 1156px;
    height: 40px;
    margin: 0 auto;
}
.hotDrawer .basicTitle .drawerTitle {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: left;
    color: #131418;
}
.hotDrawer .basicTitle .drawerTitle span {
    font-size: 30px;
    color: #CCA558;
    margin-right: 3px;
}
.hotDrawer .basicTitle .rightChange {
    float: right;
    margin-top: 20px;
    height: 20px;
    line-height: 20px;
    padding-right: 2px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.hotDrawer .hotList {
    width: 1156px;
    height: 335px;
    margin: 20px auto 0;
}
.hotDrawer .hotList .hotWindow {
    width: 380px;
    height: 335px;
}
.hotDrawer .hotList .hotWindow .hotPlayWindow {
    height: 100%;
    height: 214px;
    border-radius: 4px;
    background-image: url(../images/hotList/hotPlayWindow_bg_pink.png);
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
}
.hotDrawer .hotList .hotWindow .hotPlayWindow img {
    height: 100%;
    height: 100%;
}
.hotDrawer .hotList .hotWindow .hotPlayList {
    height: 100%;
    height: 121px;
    border-radius: 4px;
    background-color: #fff;
}
.hotDrawer .hotList .hotWindow .hotPlayList li {
    float: left;
    width: 147px;
    height: 40px;
    line-height: 40px;
    padding-left: 29px;
    padding-right: 14px;
    background-image: url(../images/hotList/list_disc_icon.png);
    background-size: 5px 5px;
    background-position: 15px 17px;
    background-repeat: no-repeat;
    font-size: 14px;
    color: #303030;
    cursor: pointer;
    border-top: 1px dotted #D8D8D8;

    /* 溢出打点---单行文本 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.hotDrawer .hotList .hotWindow .hotPlayList li:nth-child(1),
.hotDrawer .hotList .hotWindow .hotPlayList li:nth-child(2) {
    border-top: none;
}
.hotDrawer .hotList .hotWindow .hotPlayList li:hover {
    color: #CCA558;
}
.hotDrawer .hotList .hotWindow .hotPlayList li.hotPlayList_active {
    color: #CCA558;
}

.hotDrawer .hotList .itemListBox {
    width: 776px;
    height: 335px;
}
.hotDrawer .hotList .itemListBox .itemListOne {
    float: left;
    width: 186px;
    height: 335px;
    margin-left: 8px;
    font-size: 0;
    border-radius: 4px;
    background-color: #fff;
}
.hotDrawer .hotList .itemListBox .itemListOne .itemImg {
    display: inline-block;
    width: 186px;
    height: 279px;
    border-radius: 4px;
    overflow: hidden;
}
.hotDrawer .hotList .itemListBox .itemListOne .itemImg img {
    width: 186px;
    height: 279px;
}

.hotDrawer .hotList .itemListBox .itemListOne .itemName {
    display: inline-block;
    max-width: 166px;
    margin-top: 10px;
    padding-left: 10px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #191919;
    cursor: pointer;

    /* 单行文本溢出打点 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.hotDrawer .hotList .itemListBox .itemListOne .itemName:hover a {
    color: #CCA558;
}
.hotDrawer .hotList .itemListBox .itemListOne .itemDisc {
    max-width: 166px;
    margin-top: 10px;
    padding-left: 10px;
    font-size: 12px;
    line-height: 14px;
    color: #9B9B9B;

    /* 单行文本溢出打点 */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

（三）JS文档（index.js）

/**
 * 优酷会员首页上下图片菜单联动
 */
var oLi = document.querySelectorAll('.wrapperTop .bannerBox .bannerNavBox .bannerNav li'),
    oImgLi = document.querySelectorAll('.wrapperTop .bannerBox .banner li'),
    nowIndex = 0,
    timer = null;

function init() {
    bindEvent();
    play();
}
init();

//事件函数
function bindEvent() {
    len = oLi.length;
    for(var i = 0; i < len; i++) {
        oLi[i].index = i;
        oLi[i].onmouseenter = function () {
            nowIndex = this.index;
            move(nowIndex);
        }
    }
}

// 自动轮播 每隔一段时间索引值自动变化
function play() {
    clearInterval(timer);
    timer = setInterval(function () {
        nowIndex++;
        if(nowIndex == oLi.length) {
            nowIndex = 0;
        }
        move(nowIndex);
    },6000);
}

// 动作函数
function move(i) {
    var activeLi = document.getElementsByClassName('active')[0];
    activeLi.className = '';
    oLi[i].setAttribute('class', 'active');
    var showImg = document.getElementsByClassName('show')[0];
    showImg.className = '';
    oImgLi[i].setAttribute('class', 'show');
}
继续努力就好
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
原生js仿优酷banner图
11-01
原生js仿优酷banner图 原生js仿优酷banner图 原生js仿优酷banner图
用jQuery实现优酷首页轮播图
weixin_34284188的博客
01-08 70
▓▓▓▓▓▓ 大致介绍 　　看到了一个轮播图的思路，就想的自己动手实践一下，总体来说用jQuery实现起来简单多了 　　如果对代码中使用的方法有疑问，可以参考我的jQuery学习之路(持续更新)，里面有讲解；或者你和我一样学习jQuery不久，那你可以看看我的jQuery小案例(持续更新)，互相学习！ 　　预览：优酷首页轮播图 ▓▓▓▓...
CSS3实现优酷轮播图
翾的博客
03-19 1055
CSS3实在是强大， 复杂的动画由CSS来实现着实让人好理解， 闲话不多说直接进入正题。今天实验的不是沉浸式轮播图， 而是类似优酷的立体轮播图一· 效果演示二· 页面布局页面布局同正常的轮播图一样没什么好说的。上代码. <!-- width:500px height:300px -->//我选的图片正常尺寸 <div class="wrapper"> <div class="
HTML+CSS+JS 制作仿优酷视频焦点轮播图
06-08
通过HTML+CSS+JS 制作的仿优酷视频焦点轮播图，JS代买中有代码注释，新手或是初学者可根据提供的代码注释进行二次开发。
原生JS实现旋转轮播图+文字内容切换效果【附源码】
10-17
【原生JS实现旋转轮播图+文字内容切换效果】是一种常见的网页动态展示技术，用于在有限的空间内展示多张图片和相应的文字信息。本文将详细介绍如何使用纯JavaScript来实现这一功能，无需依赖jQuery等库。 首先，...
原生JS实现图片轮播切换效果
10-20
主要为大家详细介绍了原生JS实现图片轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现图片层叠轮播切换效果
10-22
【原生JS实现图片层叠轮播切换效果详解】 在网页设计中，动态的图片展示效果常常能够吸引用户的注意力，其中图片层叠轮播切换是一种常见的交互方式。本篇文章将深入探讨如何使用原生JavaScript来实现这一效果，帮助...
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
原生js实现轮播图特效
11-21
轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： ...实现效果由于大小问题无法上传，可自行观看淘宝或京东首页轮播图效果 html文件： <!DOCTYPE html> <html lang="en"> <he
仿优酷图片轮播.zip
08-14
jquery仿优酷轮播图，和优酷首页一模一样，左右切换和动画效果，可以直接使用
jQuery优酷TV首页图片轮播特效
01-05
jQuery优酷TV首页图片轮播特效. 使用非常简单。
js仿优酷banner大图切换代码.zip
07-04
js仿优酷banner大图切换代码是一款带搜索框和banner图片切换效果，鼠标悬停标题展示相应图片切换效果代码。
ViewPager优酷图片轮播器（循环、滑动）
04-13
图片自动滑动和手势滑动功能。代码简洁易懂。实现方式比网络上大多类似功能都简单。
仿优酷网站CSS+JS
10-28
这是个人做的一个仿照优酷的首页，加了部分JS，由于没有数据库和后台程序，所以没有做ajax,希望你们能喜欢
纯css3实现的优酷轮播图效果
煮酒论code
03-14 331
直接上代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;优酷轮播图&lt;/title&gt; &lt;style&gt; *{ margi
仿优酷 图片 轮播
weixin_30297281的博客
05-18 204
最新更新公司企业站，二级页面的时候，有个图片 轮播效果，设计的和优酷的差不多，只是个数不一样，就在优酷的js上面进行了修改 主要是 　　1.支持了自定义显示广告个数，交互逻辑进行相应的动态计算 　　2.修改了飞入飞出的逻辑，使得逻辑更加清晰 　　3.js进行了jq插件的封装，方便调用 　　4.相应的动画最终状态也要进行自己定义（程序计算没办法满足各种各样的需求），由于图片2边显示是对...
异形轮播-优酷
秋恨雪
10-24 2007
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。前面关于JQuery的轮播效果介绍了很多，这一节，我介绍一下一种常见的并且比较复杂的轮播效果(异形轮播)，就是优酷主界面的轮播图，效果图如下(由于CSDN控制上传的gif文件最大为2M，所以下面的效果看起来不是很好，因为它滚动两张就重复播放，不过不用担心，实际的运行效果是很流畅的)。我们在书写代码...
仿优酷html,基于jquery实现的仿优酷图片轮播特效代码
weixin_30990605的博客
06-04 465
本文为大家分享了一种常见的并且比较复杂的轮播效果，就是优酷主界面的轮播图，效果图如下：我们在书写代码之前，先分析效果图的结构：1. 左右两个方向按钮，可以用来切换上一张与下一张。2. 下方有分页指示器，用来标注滚动到了第几张，当然，你点击对应的按钮，也可以跳转到对应的图片。3. 中间主要显示区域就是用来摆放需要轮播的图片。根据上面描述，我们首先可以书写HTML代码。一、HTML代码 ...
原生JavaScript实现轮播图
最新发布
03-24
以下是一个基本的原生 JavaScript 轮播图实现： HTML ```html <div class="slider-item"></div> <div class="slider-item"></div> <div class="slider-item"></div> <a class="slider-prev" href="#">...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值