1 /*
2 * To change this license header, choose License Headers in Project Properties.
3 * To change this template file, choose Tools | Templates
4 * and open the template in the editor.
5 */
6 /* 自定义代码 */
7 function windowResize() {
8 var winW = $(window).width();
9 var winH = $(window).height();
10 var bodyH = $(‘body‘).height();
11
12 /* 左侧导航自适应高度 */
13 if (winH > 600) {
14 if(bodyH > winH) {
15 winH = bodyH;
16 }
17 $("#yunguLeft").animate({
18 height: winH
19 }, 300);
20 } else {
21 $("#yunguLeft").height(600);
22 }
23 }
24 windowResize();
25 $(window).resize(function () {
26 windowResize();
27 });
28 //左侧导航自适应
29 $("#yunguLeft").bind("click", function () {
30 $("#yunguLeftTc").toggle();
31 });
32
33 /* 公告小数字背景色控制 */
34 $(".gy-body-right .gglist").each(function(){
35 $(this).find("li:lt(3) font").css(‘background‘, "#8dcbc9");
36 });
37
38 //切换
39 $(".yungu-left-banner").bind("click",function () {
40 $(".left-left").hide();
41 $(".yungu-left-banner-tanchu").css(‘left‘,0);
42
43 });
44 $(".yungu-left-banner-tanchu").bind("click",function () {
45 $(".left-left").show();
46 });
47
48
49
50 $(".slide-left").bind("click", function (){
51 if(!$("#lunbo_pic").is(":animated")) {
52 $("#lunbo_pic").stop(false,true).animate({
53 ‘marginLeft‘: parseInt($("#lunbo_pic").css(‘marginLeft‘))-97
54 }, function(){
55 $("#lunbo_pic li:first").clone().appendTo($("#lunbo_pic"));
56 $("#lunbo_pic li:first").remove();
57 $("#lunbo_pic").css("marginLeft", 0);
58 });
59 }
60 });
61
62 $(".slide-right").bind("click", function (){
63 if(!$("#lunbo_pic").is(":animated")) {
64 $("#lunbo_pic li:last").clone().prependTo($("#lunbo_pic"));
65 $("#lunbo_pic").css(‘marginLeft‘, ‘-97px‘);
66 $("#lunbo_pic").stop(false,true).animate({
67 ‘marginLeft‘: 0
68 }, function(){
69 $("#lunbo_pic li:last").remove();
70 $("#lunbo_pic").css("marginLeft", 0);
71 });
72 }
73 });
74
75 /* 鼠标放上停止滚动 */
76 var setTime;
77
78 function setTimeFun() {
79 setTime = setTimeout(function() {
80 $(".slide-left").trigger("click");
81 setTimeFun();
82 },2000);
83 }
84
85 $("#pic_carousel").hover(function() {
86 clearTimeout(setTime);
87 }, function(){
88 setTimeFun();
89 });
90
91 setTimeFun();
以上为js代码~html代码~
1 <!DOCTYPE html> 2 <!-- 3 To change this license header, choose License Headers in Project Properties. 4 To change this template file, choose Tools | Templates 5 and open the template in the editor. 6 --> 7 <html> 8 <head> 9 <title>云谷</title> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 12 <link href="css/public.css" rel="stylesheet" type="text/css"/> 13 <link href="css/main.css" rel="stylesheet" type="text/css"/> 14 <link href="css/yungu.css" rel="stylesheet" type="text/css"/> 15 </head> 16 <body> 17 <!--顶部搜索部分开始--> 18 <div class="yungu-top"> 19 <div class="yungu-top-body"> 20 <div class="yungu-logo"><img src="images/logo.png" /></div> 21 <div class="yungu-search"> 22 <input type="text" name="keyword" value="" class="search" /> 23 <input type="button" class="searchbutton" /> 24 </div> 25 <div class="yungu-gongneng"> 26 <span class="liuyan"><a href="#"></a></span> 27 <span class="richeng"><a href="#"></a></span> 28 <span class="membercenter"><a href="#"></a></span> 29 <span class="set"><a href="#"></a></span> 30 </div> 31 <div class="clear"></div> 32 </div> 33 </div> 34 <!--顶部搜索部分结束--> 35 36 <!--左侧导航开始--> 37 <div class="yungu-left" id="yunguLeft"> 38 <div class="yungu-left-banner"> 39 <div class="left-left"> 40 <div class="zhankai"></div> 41 <div class="logo"> 42 <img src="images/selflogo.png" /> 43 <span>毛豆科技</span> 44 </div> 45 <div class="banner-list"> 46 <ul> 47 <li class="shouye"><a href="#"></a></li> 48 <li class="gonggao"><a href="#"></a></li> 49 <li class="paidan"><a href="#"></a></li> 50 <li class="tongzhi"><a href="#"></a></li> 51 <li class="chengyuan"><a href="#"></a></li> 52 </ul> 53 </div> 54 </div> 55 </div> 56 57 <!--左侧弹出层--> 58 <div class="yungu-left-banner-tanchu" id="yunguLeftTc"> 59 <div class="takeback"></div> 60 <div class="logo"> 61 <img src="images/bigselflogo.png" /> 62 <span>毛豆科技<br/> <font>宁祺超</font></span> 63 </div> 64 <div class="banner-list"> 65 <ul> 66 <li class="shouye"><a href="#">企业首页</a></li> 67 <li class="gonggao"><a href="#">系统公告</a></li> 68 <li class="paidan"><a href="#">任务派单</a></li> 69 <li class="tongzhi"><a href="#">会议通知</a></li> 70 <li class="chengyuan"><a href="#">成员管理</a></li> 71 </ul> 72 </div> 73 </div> 74 </div> 75 <!--左侧导航结束--> 76 77 <!--中间内容开始--> 78 <div class="yungu-content"> 79 80 <!--body内容开始--> 81 <div class="gy-body"> 82 <!-- top start 日期个人留言开始--> 83 <div class="top"> 84 <span class="riqi">05月22号 星期五</span> 85 <span class="pic"><i>在云谷，与您携手共创未来！</i></span> 86 <span class="top_right"> 87 <img src="images/1_32.png"/>毛豆科技(宁祺超)：带你装逼带你飞...... 88 </span> 89 </div> 90 <!--top end 日期个人留言结束--> 91 92 93 <!--body内容--> 94 <div class="gy-body-c"> 95 <!--内容左侧部分开始--> 96 <div class="gy-body-left"> 97 98 <!--top left start 企业列表开始--> 99 <div class="gy-body-left-slide"> 100 <div class="topic"> 101 <h2>云谷企业</h2> 102 <a href="javascript:void(0);">+</a> 103 </div> 104 <div id="pic_carousel" class="lunbo-detail"> 105 <div class="lunbo-detail-limit"> 106 <ul id="lunbo_pic" class="clearfix lunbo_pic"> 107 <li> 108 <a href="#"><img src="images/1_55.jpg" /></a> 109 <span class="companyname">企业名称</span> 110 <a href="#" class="addgz">加关注</a> 111 </li> 112 <li> 113 <a href="#"><img src="images/1_44.jpg" /></a> 114 <span class="companyname">企业名称</span> 115 <a href="#" class="addgz">加关注</a> 116 </li> 117 <li> 118 <a href="#"><img src="images/1_46.jpg" /></a> 119 <span class="companyname">企业名称</span> 120 <a href="#" class="addgz">加关注</a> 121 </li> 122 <li> 123 <a href="#"><img src="images/1_48.jpg" /></a> 124 <span class="companyname">企业名称</span> 125 <a href="#" class="addgz">加关注</a> 126 </li> 127 <li> 128 <a href="#"><img src="images/1_50.jpg" /></a> 129 <span class="companyname">企业名称</span> 130 <a href="#" class="addgz">加关注</a> 131 </li> 132 <li> 133 <a href="#"><img src="images/1_52.jpg" /></a> 134 <span class="companyname">企业名称</span> 135 <a href="#" class="addgz">加关注</a> 136 </li> 137 <li> 138 <a href="#"><img src="images/1_52.jpg" /></a> 139 <span class="companyname">企业名称</span> 140 <a href="#" class="addgz">加关注</a> 141 </li> 142 <li> 143 <a href="#"><img src="images/1_52.jpg" /></a> 144 <span class="companyname">企业名称</span> 145 <a href="#" class="addgz">加关注</a> 146 </li> 147 <li> 148 <a href="#"><img src="images/1_52.jpg" /></a> 149 <span class="companyname">企业名称</span> 150 <a href="#" class="addgz">加关注</a> 151 </li> 152 <li> 153 <a href="#"><img src="images/1_52.jpg" /></a> 154 <span class="companyname">企业名称</span> 155 <a href="#" class="addgz">加关注</a> 156 </li> 157 <li> 158 <a href="#"><img src="images/1_52.jpg" /></a> 159 <span class="companyname">企业名称</span> 160 <a href="#" class="addgz">加关注</a> 161 </li> 162 </ul> 163 </div> 164 <span id="arr_l" class="slide-left"><img src="images/1_62.png"/></span> 165 <span id="arr_r" class="slide-right"><img src="images/1_65.png"></span> 166 </div> 167 </div> 168 <!--企业列表结束--> 169 170 <!--内部交流开始--> 171 <div class="gy-body-left-jl"> 172 173 <div class="jl-title"> 174 <h3 class="jl">内部交流</h3> 175 <span class="xx"><a href="javascript:void(0);">我的消息</a></span> 176 </div> 177 178 <!--嵌入博客--> 179 <div class="addblog"> 180 181 </div> 182 </div> 183 <!--内部交流结束--> 184 </div> 185 <!--内容左侧结束--> 186 187 188 189 <!--内容右侧开始--> 190 <div class="gy-body-right"> 191 <div class="gonggao"> 192 <div class="gg"> 193 <h3 class="ggt">公告</h3> 194 <a href="#">更多</a> 195 </div> 196 <ul class="gglist"> 197 <li><font>1</font><a href="#">毛豆科技关于端午节日放假通知：端午。</a></li> 198 <li><font>2</font><a href="#">毛豆科技6月份启动会议：端午。</a></li> 199 <li><font>3</font><a href="#">热烈欢迎以下小伙伴加入毛豆大家庭：端午。</a></li> 200 <li><font>4</font><a href="#">毛豆科技关于端午节日放假通知：毛豆科技6月份启动会议。</a></li> 201 <li><font>5</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 202 <li><font>6</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 203 </ul> 204 </div> 205 <div class="huiyi"> 206 <div class="gg"> 207 <h3 class="ggt">会议通知</h3> 208 <a href="#">更多</a> 209 </div> 210 <ul class="gglist"> 211 <li><font>1</font><a href="#">毛豆科技关于端午节日放假通知：端午。</a></li> 212 <li><font>2</font><a href="#">毛豆科技6月份启动会议：端午。</a></li> 213 <li><font>3</font><a href="#">热烈欢迎以下小伙伴加入毛豆大家庭：端午。</a></li> 214 <li><font>4</font><a href="#">毛豆科技关于端午节日放假通知：毛豆科技6月份启动会议。</a></li> 215 <li><font>5</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 216 <li><font>6</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 217 <li><font>7</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 218 <li><font>8</font><a href="#">毛豆科技关知毛豆科技6月份启动会议端午。</a></li> 219 </ul> 220 </div> 221 <!--top right end--> 222 </div> 223 <!--内容右侧结束--> 224 225 <!--清除浮动--> 226 <div class="clear"></div> 227 </div> 228 </div> 229 230 <!-- top end--> 231 </div> 232 <!--中间内容结束--> 233 234 <script src="js/libs/jquery/jquery.min.js" type="text/javascript"></script> 235 <script src="js/yungu.js" type="text/javascript"></script> 236 </body> 237 </html>
时间： 2024-10-03 22:53:50