特效描述:利用jquery实现 仿酷狗 官网新闻 焦点图插件,利用jquery实现仿酷狗官网新闻焦点图插件
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
2. 引入JS
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.focus.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.focus.js"></script>
3. HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
$(document).ready(function(){
$("#j_Focus").Focus();
});
</script>
</head>
<body id="introduction">
<div id="page">
<div id="container" class="content clearfix">
<div class="focusWrap">
<div class="focusCon" id="j_Focus">
<div class="focusL">
<ul class="ulFocus" id="j_FocusNav">
<li rel="0">
<span>酷狗7正式版发布<br/>音乐魔力全线绽放</span>
</li>
<li rel="1">
<span>海量免费高清MV<br/>更清晰更流畅</span>
</li>
<li rel="2">
<span>酷狗7:音乐魔方<br/>带给你全新播放体验</span>
</li>
<li rel="3">
<span>个性化歌曲推荐<br/>酷狗猜你喜欢</span>
</li>
<li rel="4">
<span>酷狗收音机<br/>重新认识电台魅力</span>
</li>
<li rel="5">
<span>手机酷狗3.0<br/>无线音乐新序章</span>
</li>
</ul>
<div class="back" id="j_FocusBack"></div>
</div>
<div class="focusM">
<ul class="ulFCon" id="j_FocusCon">
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/1.jpg" alt="酷狗7正式版发布" />
</a>
</li>
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/2.jpg" alt="海量免费高清MV" />
</a>
</li>
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/3.jpg" alt="酷狗7:音乐魔方" />
</a>
</li>
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/4.jpg" alt="个性化歌曲推荐" />
</a>
</li>
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/5.jpg" alt="酷狗收音机" />
</a>
</li>
<li>
<a href="http://cxvn.com" target="_blank">
<img src="images/6.jpg" alt="手机酷狗3.0" />
</a>
</li>
</ul>
</div>
</div>
<div class="focusR">
<div class="kugoo">
<a title="马上下载酷狗7" href="http://cxvn.com" target="_blank">马上下载酷狗7</a>
</div>
<ul class="ulHot">
<li><a href="http://cxvn.com" target="_blank">酷狗音乐2011</a></li>
<li><a href="http://cxvn.com" target="_blank">手机酷狗3.0版</a></li>
<li><a href="http://cxvn.com" target="_blank">酷狗网络收音机</a></li>
<li><a href="http://cxvn.com/" target="_blank">酷狗叮咚</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
下载地址
1.《js焦点图切换代码 仿酷狗官网新闻焦点图插件》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《js焦点图切换代码 仿酷狗官网新闻焦点图插件》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.cxvn.com/code/focus/361.html