zoukankan      html  css  js  c++  java
  • jquery实现视频滚动

    原理图

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <script src="jquery.js"></script> 
    <script src="demo.js"></script>
    <link rel="stylesheet" href="style.css">
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="v_show">
        <!-- 容器 -->
            <div class="v_caption">
            <!-- 头部标题 -->
               <h2 class="cartoon" title='卡通动漫'>卡通动漫</h2>
                   <div class="highlight_tip">
                       <span class='current'>1</span>
                       <span>2</span>
                       <span>3</span>
                       <span>4</span>
                   </div>
                   <!-- 换页显示 -->
                   <div class="change_btn">
                   <!-- 按钮 -->
                         <span  class="prev"><img src="image/左.png" alt="未显示"></span>
                         <span  class="next"><img src="image/右.png" alt="未显示"></span> 
                   </div>
    
                   <em class='strong'><a href=""><i>更多>></i></a></em>
            </div>
            <div class="v_content">
            <!-- 内容展示区域 -->
                 <div class="v_content_list">
                 <!--  内容展示区域列表-->
                 <ul>
                <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="image/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
                    <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
                    <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                    <li><a href="#"><img src="image/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
                 </ul>
                 </div>
            </div>
        </div>
    </body>
    </html>
    * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    .v_show {
        position: relative;
        top: 100px;
        left: 150px;
        overflow: hidden;
        width: 920px;
        height: 280px;
        border: 2px solid #ddd;
        box-shadow: 0 0 8px #ccc;
        -webkit-box-shadow: 0 0 8px #ccc;
        -moz-box-shadow: 0 0 8px #ccc;
        -o-box-shadow: 0 0 8px #ccc;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
    }
    
    .v_caption {
        width: 1000px;
        border: 2px solid #ccc;
        background: url('image/beijing.jpg') 0 -200px no-repeat;
        background-size: cover;
        /*cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域*/
    }
    
    .cartoon, .highlight_tip, .change_btn, .prev, .next {
        display: inline-block;
        margin-left: 10px;
    }
    
    
    /*.highlight_tip {
        display: inline;
        padding-left: 10px;
    }*/
    
    .highlight_tip span {
        background: url('image/beijing4.jpg') -490px -50px no-repeat;
    }
    
    .change_btn span img {
        padding-top: 4px;
        width: 20px;
        height: 20px;
    }
    
    .cartoon {
        font-size: 25px;
        font-weight: bold;
        color: black;
    }
    
    .highlight_tip .current {
        background: blue;
    }
    
    
    /*<!-- 内容展示区域 -->*/
    
    .v_content {
        position: relative;
    }
    
    
    /*<!-- 内容展示区域列表-->*/
    
    .v_content_list {
        height: 230px;
        /*  line-height: 230px;*/
        padding-left: 30px;
        position: absolute;
    }
    
    .v_content_list ul {
        /* height: 230px;*/
        width: 3680px;
        /*    line-height: 230px;这个不能加*/
        position: relative;
        left: -30px;
        /*这个left是调整个视频内容区域的相对的位置的*/
    }
    
    .v_content_list ul li {
        padding-top: 25px;
        position: relative;
        float: left;
        height: 230px;
        margin-left: 40px;
    }
    
    .v_content_list ul li h4 {
        width: 180px;
        height: 20px;
    }
    
    .v_content_list ul li h4 a {
        color: blue;
    }
    
    .v_content_list ul li h4 a:hover {
        text-decoration: underline;
    }
    
    
    /*.v_content_list ul li span {
         180px;
        height: 20px;
    }*/
    
    
    /*.v_content_list ul li a {
        display: block;
         180px;
        height: 150px;
    }*/
    
    .v_content_list ul li a img {
        width: 180px;
        height: 150px;
    }
    
    .strong {
        margin-left: 580px;
    }
    jQuery(document).ready(function($) {
        var page = 1;
        var i = 4; //每版放4个图片
        $('span.next img').click(function() {
            var $parent = $(this).parents('div.v_show'); //根据当前点击的元素获取到父元素
            var $v_show = $parent.find('div.v_content_list'); //找到视频内容展示区域
            var $v_content = $parent.find('div.v_content'); //找到视频内容展示区域的外围
            var v_width = $v_content.width(); //获取区域内容的宽度,带单位
            var len = $v_show.find('li').length; //总的视频图片数
            var page_count = Math.ceil(len / i);
            if (!$v_show.is(':animated')) {
                if (page == page_count) {
                    //已经到最后一个版面了,如果再向后,必须跳转到第一个版面
                    $v_show.animate({
                        left: '0px'
                    }, 'slow'); //通过改变left值,跳转到第一个版面
                    page = 1;
                } else {
                    $v_show.animate({
                        left: '-=' + (v_width - 40)
                            //left=left-(v_width-40)
                    }, 'slow');
                    // $('.current')..addClass('.newClass');
                    // var $first = $('.highlight_tip:nth-child('+page+')').siblings().html();
                    //  console.log($first);
                    // console.log(v_width);
                    page++;
                    //             left:'-='+width
                    // 的意思是:left属性的最终值,是left现有值减去width这个值
                    // 例如:left:'200px' 意思是left最终值变成200
                    // left:'+200px' 意思与上面相同,是left最终值变成200
                    // left:'+=200px'      假设当前left为100     意思是left最终值是当前值加200 ,最终值为300
                }
                $('.highlight_tip span:eq(' + (page - 1) + ')').addClass('current').siblings().removeClass('current');
                // $parent.find('span').eq((page - 1)).addClass('current').siblings().removeClass('current ');
            }
        });
        $('span.prev img').click(function() {
            var $parent = $(this).parents('div.v_show'); //根据当前点击的元素获取到父元素
            var $v_show = $parent.find('div.v_content_list'); //找到视频内容展示区域
            var $v_content = $parent.find('div.v_content'); //找到视频内容展示区域的外围
            var v_width = $v_content.width(); //获取区域内容的宽度,带单位
            var len = $v_show.find('li').length; //总的视频图片数
            var page_count = Math.ceil(len / i);
            if (!$v_show.is(':animated')) { //判断动画是否还在进行,当快速点击停止后.立马停止动画
                if (page == 1) {
                    //已经到第一个版面了,如果再向前,必须跳转到最后一个版面
                    $v_show.animate({
                        left: '-=' + (v_width - 40) * (page_count - 1)
                    }, 'slow'); //通过改变left值,跳转到第一个版面
                    page = page_count;
                } else {
                    $v_show.animate({
                        left: '+=' + (v_width - 40)
                    }, 'slow');
                    page--;
                }
                $('.highlight_tip span:eq(' + (page - 1) + ')').addClass('current').siblings().removeClass('current');
                // $parent.find('span').eq((page - 1)).addClass('currentment').siblings().removeClass('currentment ');
            }
        });
    });
    
    // 第一个问题是如何让版面循环的问题。
    // //定义page
    // 第二个问题是版面的移动有误差问题
    // //减去margin-left的值既可
    // 第三个问题是视频展示区域内容的文字无法显示
    //去掉/* line-height: 230px;这个不能加*/
    //第四个问题是增加样式增加不上去的问题 //写明思路://遍历span。先给第一个span加上背景色,然后将背景色复制给下一个并且删除掉先前的。 // 为第一个span增加current,然后写入css,后面发现addClass里面的current为自己定义的与前面span里面定义的current无关 // /* height: 230px;*/ // /* line-height: 230px;这个不能加*/


    若要每个版面放5,只需要修改i,和span还有整个容器的宽度
  • 相关阅读:
    关于 Python 对象拷贝的那点事?
    痞子衡嵌入式:嵌入式从业者应知应会知识点
    痞子衡嵌入式:高性能MCU之人工智能物联网应用开发那些事
    痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU特性那些事(2)- RT685SFVK性能实测(Dhrystone)
    痞子衡嵌入式:微处理器CPU性能测试基准(Dhrystone)
    痞子衡嵌入式:如果你正在量产i.MX RT产品,不妨试试这款神器RT-Flash
    痞子衡嵌入式:飞思卡尔i.MX RT系列MCU量产神器RT-Flash常见问题
    痞子衡嵌入式:飞思卡尔i.MX RT系列MCU量产神器RT-Flash用户指南
    痞子衡嵌入式:如果i.MX RT是一匹悍马,征服它时别忘了用马镫MCUBootUtility
    痞子衡嵌入式:超级好用的可视化PyQt GUI构建工具(Qt Designer)
  • 原文地址:https://www.cnblogs.com/yi-mi-yangguang/p/6574221.html
Copyright © 2011-2022 走看看