首页新闻找找看学习计划

jQuery中视频展示效果--$v_show.animate({ left:"-="+v_width}, "slow"); 这句话不能实现,具体是什么原因影响?谢谢!

0
悬赏园豆:10 [已关闭问题] 关闭于 2017-07-07 15:12

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>视频展示列表</title>
 6         <link rel="stylesheet" type="text/css" href="style/videoList.css">
 7         <script type="text/javascript" src="../../jQuery/jquery-1.3.1.js"></script>
 8         <script type="text/javascript">
 9             $(function() {
10             //每版放三个图片
11                 var page = 1;
12                 var i = 3;
13             //给<span class="next">下一页</span>添加一个事件。
14                 $("span.next").click(function() {
15             //根据当前单击的元素获取到父元素    
16                     var $parent = $(this).parents("div.v_show"); 
17             //找到视频内容展示区    
18                     var $v_show = $parent.find("div.v_content_list");
19             //找到展示区的外围的div层。    
20                     var $v_content = $parent.find("dic.v_content");
21             //获取v_content层的宽度
22                     var v_width = $v_content.width();    
23             //获取视频展示区总的视频图片个数
24                     var len = $v_show.find("li").length;    
25             //获取版面数目,只要不是整数,取大值
26                     var page_count = Math.ceil(len / i);
27             //如果已经到达最后一个版面则:再向后就必须跳转到第一个版面    
28                     if(page == page_count) {
29                         $v_show.animate({ left : "0px"}, "slow");
30                         page = 1;
31                     } else {
32                           $v_show.animate({ left:"-="+v_width}, "slow");
33                         page++;
34                       }
35                     $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
36                 });
37             })    
38         </script>
39 
40     </head>
41     <body>
42         <div class="v_show">
43             <div class="v_caption">
44                 <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
45                 <div class="highlight_tip">
46                     <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span>
47                 </div>
48                 <div class="change_btn">
49                         <span class="prev">上一页</span>
50                         <span class="next">下一页</span>
51                 </div>
52                 <em><a href="#">更多>></a></em>
53             </div>
54             <div class="v_content">
55                 <div class="v_content_list">
56                     <ul>
57                         <li><a href="#"><img src="images/1.jpg"></a><h4><a href="#">木乃伊3</a></h4><span>播放<em>67,222</em></span></li>
58                         <li><a href="#"><img src="images/2.jpg"></a><h4><a href="#">变形金刚4</a></h4><span>播放<em>17,222</em></span></li>
59                         <li><a href="#"><img src="images/3.jpg"></a><h4><a href="#">一条狗的使命</a></h4><span>播放<em>43,222</em></span></li>
60                         <li><a href="#"><img src="images/4.jpg"></a><h4><a href="#">冰雪奇缘</a></h4><span>播放<em>87,112</em></span></li>
61                         <li><a href="#"><img src="images/5.jpg"></a><h4><a href="#">金刚</a></h4><span>播放<em>66,252</em></span></li>
62                         <li><a href="#"><img src="images/6.jpg"></a><h4><a href="#">长城</a></h4><span>播放<em>35,242</em></span></li>
63                         <li><a href="#"><img src="images/7.jpg"></a><h4><a href="#">拆弹专家</a></h4><span>播放<em>61,257</em></span></li>
64                         <li><a href="#"><img src="images/8.jpg"></a><h4><a href="#">寻龙诀</a></h4><span>播放<em>97,321</em></span></li>
65                         <li><a href="#"><img src="images/9.jpg"></a><h4><a href="#">熊出没</a></h4><span>播放<em>12,224</em></span></li>
66                         <li><a href="#"><img src="images/10.jpg"></a><h4><a href="#">向日葵</a></h4><span>播放<em>43,162</em></span></li>
67                         <li><a href="#"><img src="images/11.jpg"></a><h4><a href="#">哆啦A梦</a></h4><span>播放<em>77,289</em></span></li>
68                     </ul>
69                 </div>
70             </div>
71         </div>
72     <!--    <script type="text/javascript" src="script/videoList.js"></script>-->
73     </body>
74 </html>
* { margin: 0; padding: 0; }

body {    font-family: "仿宋"; font-size: normal; font-weight: 1em; }

.cartoon { margin-top: 10px; }
.current { background: red; }

.v_show { width: 967px; height: 242px;  margin-top: 100px; margin-left: 220px; }

.v_caption { width: 967px; height: 50px; float: left;  overflow:hidden;  background: rgb(247,147,78); }

.highlight_tip { float:left; margin-top: -23px; margin-left: 114px; }

.change_btn { float:left; margin-top: -24px; margin-left: 190px; }
 
.v_caption em { float: right;  margin-top: -12px; }


.v_content { position:relative; width:967px; height:225px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }

.v_content_list { position: absolute; width:3100px; top:0px; left:0px; }

.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 40px; padding:40px; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }

/*.v_content_list ul li { float: left; list-style: none; padding: 1em 5em;  margin-left: 40px; }*/

a:link, a:visited { text-decoration: none; color: grey; }

a:hover { color: red; }

 

排查了许久,发现只有这句话不能执行,没有效果:

 $v_show.animate({ left:"-="+v_width}, "slow");
觉得是css代码里的代码影响animate()函数的调用。请大家看看帮帮忙 ,谢谢啦  !!!!
Tell东子的主页 Tell东子 | 菜鸟二级 | 园豆:204
提问于:2017-07-07 13:48
< >
分享
所有回答(1)
0

原来是一个代码敲错了,真是郁闷!!!!

Tell东子 | 园豆:204 (菜鸟二级) | 2017-07-07 15:12

wo草,自问自答牛逼

支持(0) 反对(0) 黛码 | 园豆:200 (初学一级) | 2017-08-03 16:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册