原生js时间日期选项卡图片新闻切换代码



108 431 144



特效描述:原生js 时间日期选项卡 图片新闻切换,鼠标经过,按照日期选项卡来显示新闻切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/rili.js"></script>

3. HTML代码

  <div class="l1_1">
    <div>
      <div class="tit2">科技大事记</div>
      <div class="bor0127" id="calendar_contain">
        <table id="calendar" cellpadding="0" cellspacing="0" width="330">
          <tbody>
            <tr>
              <th colspan="7" style="border-bottom:1px solid #CDCFD3;background:#FFF"><p title="上一月份" onClick="JCalendar.update(-1);return false" style="float:left;" class="prev"><img src="images/pre.gif" height="15" width="15"></p>
                <p id="calendar_title" style="float:left;color:#333;font-weight:normal;font-size:16px;">2015年11月</p>
                <p title="下一月份" onClick="JCalendar.update(1);return false" style="float:right;" class="next"><img src="images/next.gif" height="15" width="15"></p></th>
            </tr>
            <tr>
              <td style="background:#fff;">日</td>
              <td style="background:#fff">一</td>
              <td style="background:#fff">二</td>
              <td style="background:#fff">三</td>
              <td style="background:#fff">四</td>
              <td style="background:#fff">五</td>
              <td style="background:#fff;">六</td>
            </tr>
            <tr>
              <td><div onMouseOver="JCalendar.click(this)">1</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">2</div></td>
              <td><div onMouseOver="JCalendar.click(this)">3</div></td>
              <td><div onMouseOver="JCalendar.click(this)">4</div></td>
              <td><div onMouseOver="JCalendar.click(this)">5</div></td>
              <td><div onMouseOver="JCalendar.click(this)">6</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">7</div></td>
            </tr>
            <tr>
              <td><div class="has" onMouseOver="JCalendar.click(this)">8</div></td>
              <td><div onMouseOver="JCalendar.click(this)">9</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">10</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">11</div></td>
              <td><div onMouseOver="JCalendar.click(this)">12</div></td>
              <td><div id="c_today" class="c_today" onMouseOver="JCalendar.click(this)">13</div></td>
              <td><div class="current has" onMouseOver="JCalendar.click(this)">14</div></td>
            </tr>
            <tr>
              <td><div class="has" onMouseOver="JCalendar.click(this)">15</div></td>
              <td><div onMouseOver="JCalendar.click(this)">16</div></td>
              <td><div onMouseOver="JCalendar.click(this)">17</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">18</div></td>
              <td><div onMouseOver="JCalendar.click(this)">19</div></td>
              <td><div onMouseOver="JCalendar.click(this)">20</div></td>
              <td><div onMouseOver="JCalendar.click(this)">21</div></td>
            </tr>
            <tr>
              <td><div onMouseOver="JCalendar.click(this)">22</div></td>
              <td><div onMouseOver="JCalendar.click(this)">23</div></td>
              <td><div onMouseOver="JCalendar.click(this)">24</div></td>
              <td><div onMouseOver="JCalendar.click(this)">25</div></td>
              <td><div class="has" onMouseOver="JCalendar.click(this)">26</div></td>
              <td><div onMouseOver="JCalendar.click(this)">27</div></td>
              <td><div onMouseOver="JCalendar.click(this)">28</div></td>
            </tr>
            <tr>
              <td><div onMouseOver="JCalendar.click(this)">29</div></td>
              <td><div onMouseOver="JCalendar.click(this)">30</div></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <table cellpadding="0" cellspacing="2" width="280">
          <tbody>
            <tr>
              <td colspan="7" style="background:#fff; display:none;"><p title="上一年份" onMouseOver="this.style.color='#c00'" onMouseOut="this.style.color='#616161'" onClick="JCalendar.update(-12);return false" style="float:left;color:#616161;margin-right:4px;margin-left:4px;cursor:pointer;">&lt;&lt;上一年份</p>
                <p title="下一年份" onClick="JCalendar.update(12);return false" onMouseOver="this.style.color='#c00'" onMouseOut="this.style.color='#616161'" style="float:right;margin-left:4px;color:#616161;cursor:pointer;">下一年份&gt;&gt;</p></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="dashiji" id="rili_info">
      <div class="dashiji_page"><span class="d_l2"></span> <span class="d_r2"></span> <i>1</i>/1</div>
      <div class="dashiji_time">2015年11月14日</div>
      <div class="dashiji_box"><a href="http://lol.it168.com/Home/Chengdu"><img src="images/e8867b63-470e-49bc-aaff-8bf1e3c774e3.jpg" alt="" height="110" width="330"></a><b><a href="http://lol.it168.com/Home/Chengdu">LOL妹子杯成都赛区8进4</a></b>
        <p>即将开始的LOL妹子杯成都赛区的8进4比赛即将开始,妹子们的战争火药味也越来越浓重。到底谁才能杀入决赛?....<a href="http://lol.it168.com/Home/Chengdu">【查看详情】</a></p>
      </div>
    </div>
  </div>
<script type="text/javascript">
var rili_json={"nowdate":"2015-11-13","showdate":"2015-11-14","list":[{"theyear":"2015","data":[{"themonth":"09","item":[{"thedate":"30","url":"http://mobile.it168.com/a2015/0928/1765/000001765793.shtml","imgurl":"http://image4.it168.com/2015/10/30/b5573d3d-172d-43f4-afbe-8ccaa0c78f98.jpg","title":"谷歌30日发布新机+新系统","info":"谷歌将于太平洋时间9月29日早上9点(北京时间9月30日零点)于旧金山召开2015年度新品发布会,届时两款Nexus手机、最终版“棉花糖”Android系统"}]},{"themonth":"10","item":[{"thedate":"06","url":"http://mobile.it168.com/a2015/0915/1762/000001762076.shtml","imgurl":"http://image4.it168.com/2015/10/30/17169dd0-df3d-4113-8a4c-a3612769e2bf.jpg","title":"微软10月6日发布Lumia 950","info":"微软已经正式向媒体发出邀请函,宣布于今年10月6日在纽约召开新品发布会,推出一系列Win 10系统硬件产品。最有可能将是微软Lumia 950、Lumia 950XL以及平板电脑Surface Pro 4,预计还有全新智能手环同步登场。"},{"thedate":"11","url":"http://mobile.it168.com/a2015/0925/1765/000001765470.shtml","imgurl":"http://image4.it168.com/2015/10/30/1c27cdf5-f4ad-4534-86b9-e30e116dff1d.jpg","title":"扣人心弦 中兴AXON天机新品","info":"中兴“AXON天机”旗舰系列战略发布会的实体邀请函,该邀请函为长方体纯黑盒体,盒盖正面以烫金字呈现本次中兴发布会的品牌主题“用心·不凡”。10月11日,深圳·京基100 瑞吉酒店五楼。猜测此次发布会的主角可能是即将发布的AXON天机Mini。"},{"thedate":"13","url":"http://dc.it168.com/tu/1768354_1.shtml","imgurl":"http://image4.it168.com/2015/10/30/bd99f965-3aeb-4926-8708-a8f341702fe1.jpg","title":"三剑齐发!佳能三款新机现场体验","info":"佳能在2015年10月13日正式发布了三款新机,分别是定位入门的微单EOS M10、一英寸大底定位专业便携G5X和主打小巧时尚随身携带的G9X。在下午的佳能发布会上,我们已经率先体验了这三款新机,下面来看小编的现场体验简评吧。"},{"thedate":"14","url":"http://mobile.it168.com/tu/1767819_1.shtml#1","imgurl":"http://image4.it168.com/2015/10/30/f689d424-4cab-4a87-9ba2-28ae34c23023.jpg","title":"手机拍照讲堂第二课:寂寞旅途","info":"一个面包,一盏台灯,还有一个小纸人,再加上一台手机简单的几样道具就能打造一个属于自己的影像故事,当然这里还得得益于三星Galaxy S6 edge+强大的专业模式才能拍出如此干净有趣的画面。"},{"thedate":"19","url":"http://digital.it168.com/tu/1770746_1.shtml","imgurl":"http://image4.it168.com/2015/10/30/9e47c4ba-d85a-4b12-bdb9-c951fb8cf618.jpg","title":"1999元大玩具 小米九号平衡车发布","info":"前两天,酝酿许久后,新品“九号平衡车”跟着小米电视3发布的浪潮也出现在了大众的眼光之中,售价1999元,我们来看下它的表现吧。"},{"thedate":"19","url":"http://elec.it168.com/a2015/1019/1769/000001769583.shtml","imgurl":"http://image4.it168.com/2015/10/30/c08b4ed0-65d6-48c2-b7e6-a1e7621f2770.jpg","title":"60寸分体设计 小米电视3发布","info":"10.19日小米召开新品发布会,会前虚晃一枪在所有人都以为是相机的时候,雷军突然发微博声明其实我们要发的是小米电视3哟~"},{"thedate":"20","url":"http://mobile.it168.com/a2015/1014/1768/000001768479.shtml","imgurl":"http://image4.it168.com/2015/10/30/10611067-06a9-418a-8cbb-6d6d8ab83175.jpg","title":"OPPO R7S国内于10月20日发布","info":"OPPO R7系列双机——R7和R7 Plus都时隔5个月后,R7宣布准备与大家见面,而从日前工信部曝光的身份认证信息来看,它更像是对于家族产品线的补充而非取代升级。"},{"thedate":"21","url":"http://mobile.it168.com/tu/1768101_1.shtml#3","imgurl":"http://image4.it168.com/2015/10/30/5125cf47-c9f3-4f0c-82bb-1da6a5c74ee4.jpg","title":"又来全金属 魅蓝新品21日发布","info":"魅族昨天放出了将会举行发布会的消息,并且邀请邓紫棋作为发布会的嘉宾,今天早上我们已经收到了魅族发布会的邀请函,魅族将会在10月21日于北京国家会议中心举行新品发布会,这款新品命名为“魅蓝metal”,采用金属后盖设计。"},{"thedate":"22","url":"http://sacc.it168.com","imgurl":"http://image4.it168.com/2015/10/30/cf0dd564-3a5c-4450-ad32-cf8ba22969ad.png","title":"互联网+架构师盛宴:SACC2015再创新高","info":"2015第七届中国系统架构师大会,10月22日-24日在北京新云南皇冠假日酒店顺利举行,本次大会以“互联网+重塑IT架构”为主题,站在互联网+的风口上,诚邀百余名演讲嘉宾,打造一场架构师腾飞的技术盛会。参展和合作企业28家,图书出版社5家;大会购票及赠票用户达到2700多人,现场参会人数达2500人。"},{"thedate":"23","url":"http://mobile.it168.com/a2015/1012/1767/000001767877.shtml","imgurl":"http://image4.it168.com/2015/10/30/5a6c0f60-3588-4b12-a9e5-d2cfcb38c076.jpg","title":"Gigaset ME本月23日国内发布","info":"前不久,德国通信品牌Gigaset于IFA发布智能手机ME系列-ME,ME pro,ME pure三款新品,三款手机同属ME系列。源自德国品质的智能手机厂商将10月23日在北京召开“品 德之美 Gigaset智能手机品鉴会。本次将会亮相ME系当中主推的Gigaset ME。"},{"thedate":"27","url":"http://mobile.it168.com/a2015/1023/1770/000001770961.shtml","imgurl":"http://image4.it168.com/2015/10/30/b66d7b44-1c36-4f8e-8117-5cd421c273bf.jpg","title":"进化2 乐视手机2代27日发布","info":"这次的邀请函主打“进化2”主题,白色的盒子中竟然装着一枚鱼类化石,这枚化石在右上角印有“进化2”主题,底部有乐视logo。而发布会将于10月27日下午2:30在万事达中心举办,我们也将第一时间亲临现场,解读进化的秘密。"},{"thedate":"29","url":"http://mobile.it168.com/a2015/1021/1770/000001770274.shtml","imgurl":"http://image4.it168.com/2015/10/30/935e0303-fb4b-4402-891e-1f8d091725a1.png","title":"同心环 一加手机新品29日发布","info":"一加官方将会在10月29日举办发布会,正式推出一加手机X,并在全球6个城市16:30同时发布(北京、伦敦、纽约、旧金山、新德里、雅加达)。据称将于“双十一”正式开卖。"},{"thedate":"29","url":"http://mobile.it168.com/a2015/1012/1767/000001767919.shtml","imgurl":"http://image4.it168.com/2015/10/30/59d96ea7-e3fe-4498-b33f-7bed195d2848.jpg","title":"或4699 索尼Z5系列29日发布","info":"索尼Z5系列新品即将于中国大陆发布,不过与前几代产品一样登陆国内的仍然没有迷你款Z5 Compact。目前有消息爆料称售价将为4699元/5499元,索粉们又可以充值信仰了。"},{"thedate":"30","url":"http://mp.weixin.qq.com/s?__biz=MjM5NjU1MzM1Mw==&mid=401345538&idx=1&sn=14424f862f81e38f92e305548639e7a6#wechat_redirect","imgurl":"http://image4.it168.com/2015/10/29/94f0d49a-3a81-45a7-9275-6aba96662ac4.jpg","title":"拍照要修图 听听修图创始人怎么说?","info":"本期沙龙邀请到泼辣修图创始人——王博睿,北京时间21点整,让远在美国、时差12小时的他来告诉你,怎样才能修出独特风格的图片,让你从此正式告别X图秀秀。"}]},{"themonth":"11","item":[{"thedate":"02","url":"http://weibo.com/3771196911/D1cWEiqdC?from=page_1006063771196911_profile&wvr=6&mod=weibotime&type=comment#_rnd1446185146566","imgurl":"http://image4.it168.com/2015/10/30/35f34593-a057-48b2-a396-c03194041bcc.jpg","title":"酷开旗舰新品发布会","info":"11月2日酷开要发布新品电视,据说将会是一款定位轻奢一族,倡导“轻奢华,新时尚”的生活理念产品。"},{"thedate":"07","url":"http://notebook.it168.com/a2015/1107/1775/000001775459.shtml","imgurl":"http://image4.it168.com/2015/11/11/39ac276e-de17-4731-a1ef-960315d174f4.jpg","title":"LOL妹子杯成都火爆开战","info":"11月7日下午由IT168主办,雷神总冠名的2015妹子杯LOL大赛大成都赛区32强线下赛正式开赛了!现场妹子络绎不绝,一起随小编来看看吧。"},{"thedate":"08","url":"http://notebook.it168.com/a2015/1108/1775/000001775505.shtml","imgurl":"http://image4.it168.com/2015/11/11/d69a213a-d4e4-4fd0-aea2-8e92fe570a82.jpg","title":"LOL妹子杯成都线下赛第二日","info":"相信大家昨天已经跟随小编一起领略了成都赛区妹子们的电竞风采,今日是成都赛区线下赛的第二日,现场火爆程度更胜昨日,还等什么,快跟小编一起来看!"},{"thedate":"08","url":"http://elec.it168.com/a2015/1102/1773/000001773515.shtml","imgurl":"http://image4.it168.com/2015/11/2/7766aaae-aa07-4777-b1ad-98bf3ea720f4.jpg","title":"创维2016新品发布会","info":"11月8日创维在江苏省句容市将发布2016年新品,目前没有透露新品信息,只知道多为白电产品,如冰箱、洗衣机创新性产品将和大家见面。"},{"thedate":"10","url":"http://mp.weixin.qq.com/s?__biz=MjM5NjU1MzM1Mw==&mid=402107017&idx=1&sn=611ad009bdfdc18a415c5cf98240bde5#rd","imgurl":"http://image4.it168.com/2015/11/6/f5bb5743-b4c0-425d-8df4-2853b23f7121.jpg","title":"滕飞老师告诉你怎样在“双11”买相机","info":"相机那么多,我该怎么选?11月10日晚8点,听【相机笔记】创始人——滕飞老师告诉你,怎么才能选到自己得心应手的相机。"},{"thedate":"11","url":"http://live.it168.com/364.html","imgurl":"http://image4.it168.com/2015/10/30/246e536e-a27b-49a0-b647-49111f541915.jpg","title":"双11就要买不停 剁手党必备购物攻略","info":"今天是喜闻乐见的11.11,我们不提对象只提荷包,大家一定把自己的荷包抽肿了吧?为节省时间小编送上购物攻略,抓紧时间买买买!"},{"thedate":"14","url":"http://lol.it168.com/Home/Chengdu","imgurl":"http://image4.it168.com/2015/11/11/e8867b63-470e-49bc-aaff-8bf1e3c774e3.jpg","title":"LOL妹子杯成都赛区8进4","info":"即将开始的LOL妹子杯成都赛区的8进4比赛即将开始,妹子们的战争火药味也越来越浓重。到底谁才能杀入决赛?"},{"thedate":"15","url":"http://lol.it168.com/Home/Chengdu","imgurl":"http://image4.it168.com/2015/11/11/c47eda51-807a-427d-8670-2d1283ad6183.jpg","title":"LOL妹子杯成都赛区总决赛","info":"到底谁才是电竞女王?到底谁才能走向神坛?一场软妹到女神的华丽蜕变!今日,看妹子们决战紫禁之巅!"},{"thedate":"18","url":"http://mp.weixin.qq.com/s?__biz=MzAxMzI4NTkyMg==&mid=400435912&idx=1&sn=a242ddd9e7e60d81714885d328525dc3#rd","imgurl":"http://image4.it168.com/2015/11/11/ea7e0be1-552c-40db-901a-3c6810cc121a.jpg","title":"暴风魔镜新品发布会","info":"日前,试客收到暴风魔镜神秘邀请函,邀请函显示,暴风魔镜将于本月18日(下周三)下午,在中国电影导演中心举办一场名为“VR Here|虚拟现实引爆日”的新品发布会。"},{"thedate":"26","url":"http://mobile.it168.com/a2015/1102/1773/000001773521.shtml","imgurl":"http://image4.it168.com/2015/11/2/a526ba3d-103f-4d10-9f12-42e1db7613b0.jpg","title":"华为Mate8发布时间确定26日","info":"华为Mate8的宣传海报主体为一个大大的数字“8”,海报下方为标示了“不仅仅是一次突破 MATE归来”,以及发布日期:2015.11.26。年的Mate系列新旗舰能否再续此前的辉煌令Mate8再发布前的数月就已成为大家关注的焦点。"}]}]}]}
</script> 
<script type="text/javascript" src="js/rili.js"></script> 
<script type="text/javascript">        	
function LiSelectstart(id){			
	if (document.getElementById(id)){
		var sfEls = document.getElementById(id).getElementsByTagName("li");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className = "all";
			}
			sfEls[i].onmouseout=function() {
				this.className="";
			}
		}
	}
}
if (document.getElementById("list2")){
	var sfEls = document.getElementById("list2").getElementsByTagName("dl");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className = "all";
		}
		sfEls[i].onmouseout=function() {
			this.className="";
		}
	}
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 时间轴 带标题的焦点图 日历选择器 带缩略图的幻灯片 带简介的焦点图 图片切换 时间日期插件 图片轮播 文字切换 自动滚动图片轮播 背景切换 马赛克幻灯片 手风琴 全屏焦点图 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 日历日期时间 焦点图幻灯片

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到