仿麦包包官方网站js图片切换特效代码

8个月前 (03-19 14:42)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

仿麦包包首页底部带按钮js图片定时切换代码，兼容当前主流浏览器，在窗口底部显示图片标题，并带有箭头指向效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿麦包包官方网站js图片切换特效代码_武鸣人</title>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<style type="text/css">
/*global*/
* {
margin: 0;
padding: 0;
}
body {
font: 12px tahoma, arial, verdana, geneva, sans-serif;
color: #333;
text-align:left;
background:#fff;
}
img {
border: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
color: #333;
text-decoration: none;
}
a:hover, a:active {
color: #CC0000;
text-decoration: none;
}
/*www_wuming_ren*/
.www_wuming_ren_box {
margin:20px;
width:725px;
height:391px;
border:3px solid #010101;
position:relative;
background:#fff;
z-index:0;
}
.www_wuming_ren_box div.img {
position:absolute;
width:725px;
height:391px;
left:0;
top:0;
z-index:10;
}
.www_wuming_ren_box div.loding {
position:absolute;
width:725px;
height:391px;
z-index:40;
background:#fafafa url(/img/20240319_www_wuming_ren_13.gif) no-repeat center 155px;
left:0;
top:0;
}
.www_wuming_ren_box ul.panel {
position:absolute;
width:725px;
height:34px;
top:356px;
z-index:20;
}
.www_wuming_ren_box ul.panel li {
width:144px;
/*width:180px;*/
height:34px;
float:left;
margin-left:1px;
display:inline;
background:#000;
filter:alpha(Opacity=50);
Opacity:.5;
}
.www_wuming_ren_box ul.panel li.last {
width:143px;
/*width:180px;*/
}
.www_wuming_ren_box ul.panel li.on {
filter:alpha(Opacity=80);
Opacity:.8;
}
.www_wuming_ren_box ul.title {
position:absolute;
width:725px;
height:34px;
top:356px;
z-index:30;
}
.www_wuming_ren_box ul.title li {
width:144px;
/*width:180px;*/
height:34px;
float:left;
margin-left:1px;
display:inline;
}
.www_wuming_ren_box ul.title li a {
display:block;
text-align:center;
color:#FFFDFE;
height:34px;
line-height:30px;
}
.www_wuming_ren_box ul.title li a:hover, .www_wuming_ren_box ul.title li.on a {
background:url(/img/20240319_www_wuming_ren_14.gif) no-repeat center 26px;
}
.www_wuming_ren_sidebar {
width:220px;
}
.right_content_box {
border:1px solid #B4B4B4;
padding:1px;
background:#fff;
}
.right_content_box h2.title {
height:23px;
line-height:22px;
background:url(/img/20240319_www_wuming_ren_15.gif) repeat-x;
font-weight:normal;
padding-left:10px;
}
.right_content_box h2.announcement a:link, .right_content_box h2.announcement a:visited {
color:#fff;
}
.right_content_box h2.title span {
float:right;
padding-right:2px;
}
.right_content_box ul.list {
padding:4px 6px;
}
.right_content_box ul.list li {
background:url(/img/20240319_www_wuming_ren_16.gif) no-repeat 5px 9px;
padding-left:20px;
height:22px;
line-height:22px;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，刷新页面看效果。
<div ads_key="www_wuming_ren" ads_name="首页焦点广告位" id="www_wuming_ren_box" class="www_wuming_ren_box ftl">
<div class="img dpn"><a href="https://www.wuming.ren" target="_blank" title="夏日新品第25期"><img src="/img/20240319_www_wuming_ren_17.jpg" style="width:725px; height:391px;" alt="夏日新品第25期" /></a></div>
<div class="img dpn"><a href="https://www.wuming.ren" target="_blank" title="七夕情人专场"><img src="/img/20240319_www_wuming_ren_18.jpg" style="width:725px; height:391px;" alt="七夕情人专场" /></a></div>
<div class="img dpn"><a href="https://www.wuming.ren" target="_blank" title="2010钱包汇聚"><img src="/img/20240319_www_wuming_ren_19.jpg" style="width:725px; height:391px;" alt="2010钱包汇聚" /></a></div>
<div class="img dpn"><a href="https://www.wuming.ren" target="_blank" title="98分贝疯狂拼购"><img src="/img/20240319_www_wuming_ren_20.jpg" style="width:725px; height:391px;" alt="98分贝疯狂拼购" /></a></div>
<div class="img dpn"><a href="https://www.wuming.ren" target="_blank" title="越夜越时尚"><img src="/img/20240319_www_wuming_ren_21.jpg" style="width:725px; height:391px;" alt="越夜越时尚" /></a></div>
<ul id="www_wuming_ren_txt_bg">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="www_wuming_ren_txt">
<li><a href="https://www.wuming.ren" target="_blank" title="夏日新品第25期">夏日新品第25期</a></li>
<li><a href="https://www.wuming.ren" target="_blank" title="七夕情人专场">七夕情人专场</a></li>
<li><a href="https://www.wuming.ren" target="_blank" title="2010钱包汇聚">2010钱包汇聚</a></li>
<li><a href="https://www.wuming.ren" target="_blank" title="98分贝疯狂拼购">98分贝疯狂拼购</a></li>
<li><a href="https://www.wuming.ren" target="_blank" title="越夜越时尚">越夜越时尚</a></li>
  </ul>
<div id="www_wuming_ren_loding"></div>
</div>
<script type="text/javascript">
//---------- start index focus
function www_wuming_ren_change()
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var self_now = 0;
var self_speed = 5000;
var self_auto_change = null;
var self_max = $('#www_wuming_ren_box div.img').size();
function self_change(i)
{
$('#www_wuming_ren_box div.img').hide();
$('#www_wuming_ren_txt_bg li').removeClass('on');
$('#www_wuming_ren_txt li').removeClass('on');
$('#www_wuming_ren_box div.img:eq(' + i + ')').show();
$('#www_wuming_ren_txt_bg li:eq(' + i + ')').addClass('on');
$('#www_wuming_ren_txt li:eq(' + i + ')').addClass('on');
}
function self_interval()
{
return setInterval(function(){
self_now++;
if (self_now >= self_max)
{
self_now = 0;
}
self_change(self_now);
}, self_speed);
}
$('#www_wuming_ren_box div:first').show();
$('#www_wuming_ren_txt_bg li:first').addClass('on');
$('#www_wuming_ren_txt li:first').addClass('on');
$('#www_wuming_ren_txt li').each(function(i)
{
$(this).mouseover(function(){
self_now = i;
clearInterval(self_auto_change);
self_change(i);
}).mouseout(function(){
self_auto_change = self_interval();
});
});
$(function(){
$('#www_wuming_ren_loding').hide();
self_auto_change = self_interval();
});
}
www_wuming_ren_change();
//---------- end index focus
</script>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/344.html

图片切换箭头定时
回帖

仿麦包包官方网站js图片切换特效代码 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息