虎牙动感轮播图

最新推荐文章于 2023-11-19 03:22:08 发布
最新推荐文章于 2023-11-19 03:22:08 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42603985/article/details/84328782
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <title>虎牙动感轮播图</title>
        <style type="text/css">
            
            *{
                margin:0;
                padding:0;
            }
            html{
                width:100%;
                height:100%;
                background-image: linear-gradient(#cc00cc,#ddFF00);
            }
            
            .box{
                overflow: hidden;
                position: relative;
                width:100%;
                height:246px;
            }
            
            .banner{
                width:1340px;
                height:246px;
                margin:0 auto;
                position: relative;
                /*transform-style: preserve-3d;*/
            }
    
         .banner li{
                position: absolute;
                width:750px;
                height:246px;
                list-style:none;
                opacity: 0;
            }
            
            img{
                width:750px;
                height:246px;
            }
            
            .banner .p1{
                left:300px;
                opacity: 1;
                z-index:3;
            }
            
            
            .banner .p2{
                opacity: 0.8;
                left:0;
            }
            .p2 img{
                transform:scale(0.8);
            }
            
            
            .banner .p3{
                opacity: 0.8;
                left:600px;
            }
            .p3 img{
                transform:scale(0.8);
            }
            
            
            
            .banner .p4{
                opacity:0;
                left:-300px;
            }
            .p4 img{
                transform:scale(0.8);
            }
            
            
            .banner .p5{
                opacity: 0;
                left:900px;
            }
            .p5 img{
                transform:scale(0.8);
            }
            
            .banner .p6{
                opacity: 0;
                left:300px;
            }
            .p6 img{
                transform:scale(0.8);
            }
            
            
            
            
            .b_btn{
                width:200px;
                height:30px;
                position: absolute;
                left:682px;
                bottom:5px;
                z-index:999;
            }
            
            
            .b_btn .btn_active{
                background:#924c9b;
                opacity: 1;
            }
            
            .b_btn li{
                width:20px;
                height:20px;
                border-radius:100%;
                background:#a39393;
                list-style:none;
                float: left;
                margin:0 5px;
            }
            
        </style>
    </head>
    <body>
        <div> 背景渐变色效果代码：background-image: linear-gradient(#cc00cc,#ddFF00);</div>
        
        
        <!--start-->
        
        <div class="box">
            <ul class="banner">
                <li class="p1"><img src="img/1.jpg"/> </li>
                <li class="p2"><img src="img/2.jpg"/> </li>
                <li class="p3"><img src="img/3.jpg"/> </li>
                <li class="p4"><img src="img/4.jpg"/> </li>
                <li class="p5"><img src="img/5.jpg"/> </li>
                <li class="p6"><img src="img/6.jpg"/> </li>
            </ul>
            <ul class="b_btn">
                <li class="btn_active"></li>
                <li></li>
                <li ></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        <!--end-->
        
        
        
    <script type="text/javascript">
        
        $(function(){
            $(".b_btn").find("li").each(function(){
                $(this).click(function(){
                    $(this).addClass("btn_active").siblings().removeClass("btn_active");
                    var  index =$(this).index()
                    
                    
                    
                });
            });
        });
        
        
        
        //向右移动
        function moveRight(){
            
        }
    
        
        
    /*    
        setInterval(function(){
            
            for(int i =index;i<7;i++;){
            $(".banner").find(".p"+index).animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p3").find("img").css("transform","scale(1)");
            
        }    
        },1000,function(){
            index++;
        });
        */
        
        
        var index =1;
        
        
        setInterval(function() {
            
        /*    $(".banner").find(".p3").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p3").find("img").css("transform","scale(1)");*/
        
        console.log("index"+index);
        //1
        if(index==1){
        $(".banner").find(".p1").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p2").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p2").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p3").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p3").find("img").css("transform","scale(1)");
        
    
        $(".banner").find(".p4").animate({"opacity":"0","left":"300px","z-index":"1"});
        
        $(".p4").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p5").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p5").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p6").animate({"opacity":"0","left":"900px","z-index":"1"});
        
        $(".p6").find("img").css("transform","scale(0.8)");
        
        }
        
        //2
    if(index==2){
        $(".banner").find(".p1").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p2").animate({"opacity":"0","left":"300px","z-index":"1"});
        
        $(".p2").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p3").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p3").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p4").animate({"opacity":"0","left":"900px","z-index":"1"});
        
        $(".p4").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p5").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p5").find("img").css("transform","scale(1)");
        
        
        $(".banner").find(".p6").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p6").find("img").css("transform","scale(0.8)");
        
        
        
        }
        //3
        if(index==3){
        
        $(".banner").find(".p1").animate({"opacity":"0","left":"0px","z-index":"1"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p2").animate({"opacity":"0","left":"900px","z-index":"1"});
        
        $(".p2").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p3").animate({"opacity":"0","left":"-300px","z-index":"2"});
        
        $(".p3").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p4").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p4").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p5").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p5").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p6").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p6").find("img").css("transform","scale(1)");
        }
        //4
        if(index==4){
        
        $(".banner").find(".p1").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p2").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p2").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p3").animate({"opacity":"0","left":"300px","z-index":"1"});
        
        $(".p3").find("img").css("transform","scale(0.8)");
                
        
        $(".banner").find(".p4").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p4").find("img").css("transform","scale(1)");
        
        
        $(".banner").find(".p5").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p5").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p6").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p6").find("img").css("transform","scale(0.8)");
        }
        
        //5
        if(index==5){
        $(".banner").find(".p1").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p2").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p2").find("img").css("transform","scale(1)");
        $(".banner").find(".p3").animate({"opacity":"0","left":"900px","z-index":"1"});
        $(".p3").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p4").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p4").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p5").animate({"opacity":"0","left":"300px","z-index":"1"});
        
        $(".p5").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p6").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p6").find("img").css("transform","scale(0.8)");
        }
        
        //6
        if(index==6){
        
        $(".banner").find(".p1").animate({"opacity":"1","left":"300px","z-index":"3"});
        
        $(".p1").find("img").css("transform","scale(1)");
        
        $(".banner").find(".p2").animate({"opacity":"0.8","left":"0px","z-index":"2"});
        
        $(".p2").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p3").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p3").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p4").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p4").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p5").animate({"opacity":"0","left":"900px","z-index":"1"});
        
        $(".p5").find("img").css("transform","scale(0.8)");
        
        
        $(".banner").find(".p6").animate({"opacity":"0","left":"300px","z-index":"1"});
        
        $(".p6").find("img").css("transform","scale(0.8)");
        }
        /*
        $(".banner").find(".p2").animate({"opacity":"0","left":"-300px","z-index":"1"});
        
        $(".p1").find("img").css("transform","scale(0.8)");
        
        $(".banner").find(".p4").animate({"opacity":"0.8","left":"600px","z-index":"2"});
        
        $(".p4").find("img").css("transform","scale(0.8)");*/
        
        
            index++;
            $(".b_btn").find("li").eq(index-1).addClass("btn_active").siblings().removeClass("btn_active");
            console.log(index)
            if(index>6){
                index=1;
                 $(".b_btn").find("li").eq(0).addClass("btn_active").siblings().removeClass("btn_active");
            }
            
        }, 3000);
        
    </script>
    </body>
</html>

 

作者： 看到虎牙的轮播图功能 闲来无事 实现了一下   代码 没有做优化  代码有大量的冗余  原理逻辑很清晰！！

ChicUniqueKing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python抓取直播源 并更新_虎牙直播源Python爬虫
weixin_39812224的博客
11-24 2073
这段源码可以爬的是虎牙“一起看”的版块即轮播电影那个区域的,其他版块的需要自行修改。import requestsimport reimport jsonfrom lxml import etreeclass Huya_live:def __init__(self):# self.list_url = []self.id = []self.headers = {"user-agent": "Moz...
电视直播轮播台
02-08
电视直播轮播台节目清单，确认可以使用。直播编程样本试验使用。
jquery虎牙TV3D轮播特效
weixin_34402090的博客
04-26 147
css部分： *{ margin: 0px; padding: 0px; } body{ margin: 0px; padding: 0px; text-align: center; } #banner{ margin: 0px auto; width: 1030px; height: 250px; po...
获取虎牙直播源
最新发布
王洪展的博客
11-19 2430
获取虎牙直播源
前端:运用html+css+js实现虎牙直播上的轮播图效果
坚持不懈的大白的博客
07-10 800
近段时间看虎牙直播看的多，发现这上面的一个轮播图效果不错，如是打算运用纯html+css+js实现一下上述那个运行效果，虽然最终效果和上述的还有所差异，但是小编自己觉得还不错，当然，读者想理解更多关于轮播图的实现，可以去看看小编的这篇博客(比较基础的那种)，[前端：HTML+CSS+JavaScript实现轮播图](https://liuze.blog.csdn.net/article/details/122240750)。
PictureHuYa_爬虫_虎牙直播_
09-29
在这个案例中，"PictureHuYa_爬虫_虎牙直播_" 的标题表明我们要探讨的是一个针对虎牙直播平台的图片爬虫项目。这个项目的目标是从虎牙直播的网页上下载封面图片，并将其保存为本地的图片文件。 首先，我们需要理解...
斗鱼抖音虎牙支付通道.txt
12-14
抖音斗鱼虎牙支付系统
虎牙直播地址解析.exe
11-26
用易语言写的虎牙直播地址解析工具，有需要的拿去。 直接将虎牙的播放页面地址转换成m3u8地址，对之前的版本修复与优化了一下，如果下载发现不能正常使用的，请私信我，我修复后，重新免积分发你一份。谢谢支持！
虎牙滑块坐标识别.e
11-19
虎牙滑块坐标识别,自动获取滑动二维码坐标,取出来的坐标不是特别准确,成功率能达到百分之80,还是挺不错的,就分享出来给大家学习学习,谢谢!
C#通过WebSocket获取虎牙直播间弹幕
06-30
在本文中，我们将深入探讨如何使用C#编程语言通过WebSocket协议获取虎牙直播间的弹幕。WebSocket是一种在客户端和服务器之间建立长连接的协议，它允许实时、双向的数据传输，非常适合用于实时通信应用，如直播弹幕...
android 显示大的gif图片 能解决内存溢出的问题
09-18
android 显示大的gif图片 能解决内存溢出的问题 用jni实现
Android点赞的动态动画效果
09-22
直播点赞的动态效果。 随机的动态图片。生成后依据贝塞尔曲线运行后，慢慢的消失。 一个简单的自定义控件。实现动态的点赞效果。
爬取虎牙直播图片的代码分析
qq_47323812的博客
09-14 926
爬取虎牙直播图片的分析 文章目录爬取虎牙直播图片的分析一、直接放源码二、代码分析总结 一、直接放源码 import requests from lxml import etree url='https://www.huya.com/g/4079' r=requests.get(url) data=etree.HTML(r.text) girls=data.xpath('//img[@class="pic"]') #匹配 for girl in girls: img_url=girl.xpat
虎牙小姐姐合集
qq_38502589的博客
05-03 972
#-*- codeing = utf-8 -*- #@Time：2021/3/12 0012 22:21 #@Author：权倾天下 #@File：爬取虎牙小姐姐照片.py #@Software：PyCharm import requests import os import json import time from random import randint def main(): url = 'https://www.huya.com/cache.php' ...
gif
07-11 178
gif
gif动态图gif出处_我喜欢GIF的怪异事物
热门推荐
weixin_26732881的博客
08-05 1万+
gif.js 生成gifI was recently reminded that I never wrote down all the weird things I learned about the GIF file format when implementing GIF decoding/playback at work last year. (I was reminded of this ...
Android加载 gif动态图 Glide 框架和 android-gif-drawable 框架对比
huyawenz的博客
01-29 6001
因为项目需要加载gif动态图。上网查了一下 发现都是介绍Glide去加载动态图的。刚开始还觉得Glide挺好的。可以实现加载动态图。也可以监听加载完后的状态 设置原来的普通图片。后来发现Glide加载大的gif图很慢。后来又发现加载本地图片的时候。Glide不能设置加载完的监听了。发现了android-gif-drawable 这个框架 。发现挺好用的。速度比Glide快很多。是用jni加载的。不
机智的黄图哥----第一个python爬虫的编写（一）
怒吼西柚的专栏
11-14 6981
很久以前的一个夏天夜晚，我发现了一个非常
python抓取虎牙
10-19
引用主要介绍了Python selenium抓取虎牙短视频代码实例，这意味着使用Python的selenium库可以抓取虎牙短视频。selenium是一个自动化测试工具，可以模拟用户在浏览器中的操作，例如点击、输入等。通过selenium，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值