jq-图片左右整屏滚动

最新推荐文章于 2024-01-06 09:28:35 发布
原创最新推荐文章于 2024-01-06 09:28:35 发布 · 1.2k 阅读
0 ·
CC 4.0 BY-SA版权
jq 专栏收录该内容
8 篇文章
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <title>视频展示效果</title>
    <style type="text/css">
  .v_show *{margin:0px; padding:0px;}
  .v_show{ border:#000 solid 1px; width:600px;}
  .v_show a{color:#000; text-decoration:none;}
  .v_caption{background:#ccc; height:30px; padding:0px 10px;}
  .cartoon,.change_btn{float:left; line-height:30px;}
  .cartoon{ height:30px; width:70px; font-size:25px; font-family:"黑体"; font-weight:bold;}
  .change_btn{ height:30px; margin-left:0px;}
  .v_caption em{float:right;line-height:30px;}
  .prev,.next{border:1px solid #000; cursor:pointer;}
  .v_content_list ul li{list-style:none; float:left; margin-left:10px; margin-right:10px;}
  .v_content_list ul{position:absolute;}
  .v_content{ height:160px; padding-top:20px;}
  .v_content_list{height:135px; width:600px; overflow:hidden;position:absolute; z-index:2;}
  
    </style>
    <script type="text/javascript">
  $(function(){
    var $v_show = $("div.v_content_list ul");//找到视频内容展示区
    var $v_content = $("div.v_content");//找到视频内容展示区外围DIV
    var v_width = $v_content.width();
    var len = $v_show.find("li").length;
    var i = 4;
    var page = 1;
    var page_count = Math.ceil(len/i);
    
    //右
    $("span.next").click(function(){
      if(!$v_show.is(":animated"))
      {
       if(page == page_count)
       {
        $v_show.animate({left:'0px'},"slow");
        page = 1;
       }
       else
       {
        $v_show.animate({left:'-='+v_width},"slow"); 
        page++;
       } 
      }
     });
    //左
    $("span.prev").click(function(){
      if(!$v_show.is(":animated"))
      {
       if(page == 1)
       {
        $v_show.animate({left:'-='+v_width*(page_count-1)},"slow");
        page = page_count;
       }
       else
       {
        $v_show.animate({left:'+='+v_width},"slow"); 
        page--;
       } 
      }
     });
   });
 </script>
</head>

<body>
 <div class="v_show">
     <div class="v_caption">
         <div class="cartoon" title="狗狗">狗狗</div>
            <div class="change_btn">
                <span class="prev">上一页</span>
                <span class="next">下一页</span>
            </div>
            <em><a href="#">更多>></a></em>
        </div>
        <div class="v_content">
   <div class="v_content_list">
             <ul>
                 <li><a href="#">
                        <img src="images/pic1.jpg" width="130px" height="100px" alt="狗狗" />
                    </a>
                      <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                 <li>
                     <a href="#">
                         <img src="images/pic1.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic1.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic1.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>

                    <li>
                     <a href="#">
                         <img src="images/pic2.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic2.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic2.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic2.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic3.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic3.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic3.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                    <li>
                     <a href="#">
                         <img src="images/pic3.jpg" width="130px" height="100px" alt="狗狗" />
                        </a>
                        <h4><a href="#">狗狗哦</a></h4>
                        <span>播放:<em>28,276</em></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>