基于jQuery实现迅雷音乐频道焦点图切换



26 102 35



特效描述:基于jQuery实现 迅雷音乐频道 焦点图切换,基于jQuery实现迅雷音乐频道焦点图切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

3. HTML代码

<script type="text/javascript">
document.oncontextmenu=function(){ return false }
</script>
<div class="foucebox">
<div class="bd" style="position: relative; width: 720px; height: 400px;">
<div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;">
<a href="http://51qianduan.com"><img src="images/1.jpg"></a>
<div class="foucebox_bg"></div><div><h2 style="bottom: 60px;"><a href="http://51qianduan.com">One Direction 《Kiss You》</a></h2><p style="bottom: 10px;">One Direction的《Kiss You》MV首播,在提前曝光的花絮中,1D的五位正太在《Kiss You》中裸身玩冲浪,吊足胃口啦!</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/2.jpg"></a><div class="foucebox_bg"></div><div><h2 style="bottom: 60px;"><a href="http://51qianduan.com">欧美歌手 《The 40 Sexiest Music Videos of 2012》</a></h2><p style="bottom: 10px;">2012年来自欧美地区排名前40的sexyMV合集。</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px;"><a href="http://51qianduan.com"><img src="images/3.jpg"></a><div class="foucebox_bg"></div><div><h2 style="bottom: 60px;"><a href="http://51qianduan.com">Sori 《Dual Life》</a></h2><p style="bottom: 10px;">韩国性感女歌手Sori时隔两年发行的新曲《Dual Life》MV出炉。在MV中她展现了雄厚的舞蹈基础,更是有高难度的托举旋转动作,与舞曲的配合也是淋漓尽致!来一起欣赏韩流音乐新年性感弹第一曲吧!</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/4.jpg"></a><div class="foucebox_bg"></div><div><h2><a href="http://51qianduan.com">Super Junior 《BREAK DOWN》</a></h2><p>由东海、始源、厉旭、圭贤、Henry、周觅、银赫、晟敏组成的Super Junior的华语圈小分队Super Junior-M正式推出第二张正规专辑《Break Down》,展开全新活动。</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/5.jpg"></a><div class="foucebox_bg"></div><div><h2><a href="http://51qianduan.com"> 电影主题音乐</a></h2><p>电影音乐是电影的重要组成部分,当你听到一段音乐的时候也许会想起一部经典的电影,这就是电影音乐的魅力。一首好的电影音乐,对整个影片起着至关重要的作用。通常一部电影会由多首音乐相衬,以更好的衬托出电影需要表现的内容。 </p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/6.jpg"></a><div class="foucebox_bg"></div><div><h2><a href="http://51qianduan.com"> 《韩国单曲排行榜 年度Top100》</a></h2><p>神马!江南style才排16!小编最爱的T妞40名开外!你钟爱的idol在年榜里排多少自己来看吧!!2012韩流金曲全包括,这也是MV收集控们查漏补缺的利器啊!这么多帅哥美女美颜美腿表示淡定不能了,来一起跟小编喷鼻血吧!!!</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/7.jpg"></a><div class="foucebox_bg"></div><div><h2><a href="http://51qianduan.com">少女时代 《I Got A Boy》</a></h2><p>少女时代的新专辑主打歌《I Got a Boy》完整版大公开!这首主打曲由韩国和欧洲顶尖作曲家打造,从推出前开始就受到音乐粉丝的高度期待。绝对靓丽的色彩搭配和帅气的编舞,给你不一样的惊喜!</p></div></div><div class="showDiv" style="position: absolute; width: 720px; left: 0px; top: 0px; display: none;"><a href="http://51qianduan.com"><img src="images/8.jpg"></a><div class="foucebox_bg"></div><div><h2><a href="http://51qianduan.com">Blue 《Hurt Lovers》</a></h2><p>英伦天团Blue再次扬帆起航,从新单《Hurt Lovers》已能窥见全新大碟的冰山一角。新单整体感觉大气磅礴,由Duncan略带沙哑的磁性嗓音带入,随后Lee的高音将爱的刺痛感展现得淋漓尽致四人完美的和声如蓄势已久。</p></div></div></div>
<div class="hd"><ul><li class=" "><a href="http://51qianduan.com/"><img src="images/1.1.jpg"><span class="txt">Kiss You</span><span class="txt_bg"></span><span class="mask"></span></a></li><li class=" "><a href="http://51qianduan.com/"><img src="images/1.2.jpg"><span class="txt">The 40 Sexiest Music Videos of 2012</span><span class="txt_bg"></span><span class="mask"></span></a></li><li class="on"><a href="http://51qianduan.com/"><img src="images/1.3.jpg"><span class="txt">Dual Life</span><span class="txt_bg"></span><span class="mask"></span></a></li><li><a href="http://51qianduan.com/"><img src="images/1.4.jpg"><span class="txt">BREAK DOWN</span><span class="txt_bg"></span><span class="mask"></span></a></li><li><a href="http://51qianduan.com/"><img src="images/1.5.jpg"><span class="txt">电影主题音乐</span><span class="txt_bg"></span><span class="mask"></span></a></li><li><a href="http://51qianduan.com/"><img src="images/1.6.jpg"><span class="txt">韩国单曲排行榜 年度Top100</span><span class="txt_bg"></span><span class="mask"></span></a></li><li><a href="http://51qianduan.com/"><img src="images/1.7.jpg"><span class="txt">I Got A Boy</span><span class="txt_bg"></span><span class="mask"></span></a></li><li><a href="http://51qianduan.com/"><img src="images/1.8.jpg"><span class="txt">Hurt Lovers</span><span class="txt_bg"></span><span class="mask"></span></a></li></ul></div></div>
<script type="text/javascript">
jQuery(".foucebox").slide({ effect:"fold", autoPlay:true, delayTime:300, startFun:function(i){jQuery(".foucebox .showDiv").eq(i).find("h2").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"60px"},300);jQuery(".foucebox .showDiv").eq(i).find("p").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"10px"},300);}});
</script>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 图片叠加 图片层叠 图片翻转 图片旋转 图片拖动 图片拖拽 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片放大镜 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 flash焦点图 flash幻灯片 flashbanner flash图片轮播 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滚动切换 滚动条切换 图片广告 滑动选项卡 滑动切换 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片切换 图片选项卡 图标选项卡 图标导航 图标菜单 自动滚动图片轮播 滑动手风琴 背景切换 大图切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 渐隐切换 淡出淡进 淡出 淡进 图表 焦点图 幻灯片 轮播图 bar焦点图 图片 图片插件 头像截图 图片淡出淡进 图片淡出 图片淡进 缩略图 带简介的焦点图 图片切换 图片选项卡 图标选项卡 选项卡自动切换 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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