Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript仿QQ网站新闻图片轮换效果

javascript仿QQ网站新闻图片轮换效果

发布时间:2017-01-11   编辑:www.jquerycn.cn
jquery中文网为您提供javascript仿QQ网站新闻图片轮换效果等资源,欢迎您收藏本站,我们将为您提供最新的javascript仿QQ网站新闻图片轮换效果资源
一篇javascript仿QQ网站新闻图片轮换效果,有需要的朋友可以参考一下哦。
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html> <head> <link href="http://news.qq.com/base2011/css/qq.css" rel="stylesheet" type="text/css"> <style> .turn { height: 212px; float: left; overflow: hidden; position: relative; } .turn #adpica { width: 382px; height: 210px; overflow: hidden; } .turn #adpica img { width: 380px; height: 210px; float: left; overflow: hidden; } .turn #adtipa { height: 16px; position: absolute; right: 8px; bottom: 8px; } .turn #adtipa ul li { width: 19px; height: 19px; line-height: 19px; float: left; text-align: center; display: inline; margin: 0 1px; cursor: pointer; color: #fff; background: #000; } .turn #adtipa ul li.current { color: #fff; background: #cc0000; } .turn .hidden { display: none; } .turn .show { display: block !important; } #adpica span { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; height: 33px; width: 380px; filter: alpha(opacity=70); opacity: 0.7; background: #000; text-indent: -9999em; } #adpica p { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; height: 33px; line-height: 33px; width: 285px; padding-left: 5px; font-weight: bold; } </style> </head> <body>
<span>焦点图文字背景</span>

广州花都拆违遭遇碎瓶煤气罐

<ul onmouseout="change()"> <li class="current" onmouseover="adchangea(1)">1 </li> <li class="" onmouseover="adchangea(2)">2 </li> <li class="" onmouseover="adchangea(3)">3 </li> <li class="" onmouseover="adchangea(4)">4</li></ul>
<script> //鼠标移过来的动作。显示当前图片,清除轮询。 function adchangea(adid) { dochange(adid); clearTimeout(adisround); } //自动轮询 function adchangea2(adid) { dochange(adid); var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); if ((adnext = adid 1) > adbigimg.length) adnext = 1; adisround = setTimeout('adchangea2(' adnext ')', 3000); } //显示当前图片 function dochange(adid) { id = adid; var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li"); for (var adi = 0; adi < adbigimg.length; adi ) { adbigimg[adi].className = "hidden"; adsmallimg[adi].className = ""; } adbigimg[adid - 1].className = "show"; adsmallimg[adid - 1].className = "current"; } var adisround = setTimeout("adchangea2(2)", 3000); var id;//当前激活id //鼠标移开ul块时,恢复轮询 function change() { adchangea2(id); } </script>
</body> </html></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
javascript仿QQ网站新闻图片轮换效果
jquery【插件】图片切换轮播等
jquery仿flash 个性实用的新闻图片联动标题效果
jQuery 焦点新闻图片轮播的实现代码
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
漂亮的仿国外网站图片展示效果
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
纯javascript 仿flash图片切换代码
12款经典的白富美型—jquery图片轮播插件—前端开发必备

[关闭]