2顶

麦包包首页js图片切换代码

稿源：互联网 2022-07-25 21:25:03 点击： 4613 撤稿纠错

带按钮js图片切换代码，兼容当前主流浏览器。

以下讨论的是和图片切换相关的麦包包首页js图片切换代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 麦包包官方网站js图片切换代码 站长特效网欢迎您。</title>
<script type="text/javascript" src="http://ui.alixixi.com/script/jquery.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_zzjs_net*/
.www_zzjs_net_box {
 margin:100px;
 width:725px;
 height:391px;
 border:3px solid #010101;
 position:relative;
 background:#fff;
 z-index:0;
}
.www_zzjs_net_box div.img {
 position:absolute;
 width:725px;
 height:391px;
 left:0;
 top:0;
 z-index:10;
}
.www_zzjs_net_box div.loding {
 position:absolute;
 width:725px;
 height:391px;
 z-index:40;
 background:#fafafa url(http://wsstatic.mbaobao.com/v1/images/new_homepage/loding.gif) no-repeat center 155px;
 left:0;
 top:0;
}
.www_zzjs_net_box ul.panel {
 position:absolute;
 width:725px;
 height:34px;
 top:356px;
 z-index:20;
}
.www_zzjs_net_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_zzjs_net_box ul.panel li.last {
 width:143px;
 /*width:180px;*/
}
.www_zzjs_net_box ul.panel li.on {
 filter:alpha(Opacity=80);
 Opacity:.8;
}
.www_zzjs_net_box ul.title {
 position:absolute;
 width:725px;

 height:34px;
 top:356px;
 z-index:30;
}
.www_zzjs_net_box ul.title li {
 width:144px;
 /*width:180px;*/
 height:34px;
 float:left;
 margin-left:1px;
 display:inline;
}
.www_zzjs_net_box ul.title li a {
 display:block;
 text-align:center;
 color:#FFFDFE;
 height:34px;
 line-height:30px;
}
.www_zzjs_net_box ul.title li a:hover, .www_zzjs_net_box ul.title li.on a {
 background:url(http://wsstatic.mbaobao.com/v1/images/new_homepage/arrow_focus.gif) no-repeat center 26px;
}
.www_zzjs_net_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(http://wsstatic.mbaobao.com/v1/images/new_homepage/title_right_content.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(http://wsstatic.mbaobao.com/v1/images/new_homepage/arrow_01.gif) no-repeat 5px 9px;
 padding-left:20px;
 height:22px;
 line-height:22px;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
需要加载js文件，刷新看效果。
<div ads_key="www_zzjs_net" ads_name="首页焦点广告位" id="www_zzjs_net_box" class="www_zzjs_net_box ftl">
  <div class="img dpn"><a href="http://www.zzjs.net" target="_blank" title="夏日新品第25期"><img class="img_directly_load" src="http://res.mbbimg.cn/activity/201008/10/event_20100809_new25_01.jpg" style="width:725px; height:391px;" alt="夏日新品第25期" /></a></div>
  <div class="img dpn"><a href="http://www.zzjs.net" target="_blank" title="七夕情人专场"><img class="img_directly_load" src="http://images.mbaobao.com/activity/201008/05/event_20100805_qixi.jpg" style="width:725px; height:391px;" alt="七夕情人专场" /></a></div>
  <div class="img dpn"><a href="http://www.zzjs.net" target="_blank" title="2010钱包汇聚"><img class="img_directly_load" src="http://images.mbaobao.com/activity/201007/20/event_20100720_00.jpg" style="width:725px; height:391px;" alt="2010钱包汇聚" /></a></div>
  <div class="img dpn"><a href="http://www.zzjs.net" target="_blank" title="98分贝疯狂拼购"><img class="img_directly_load" src="http://res.mbbimg.cn/activity/201008/12/event_20100812_buy02.jpg" style="width:725px; height:391px;" alt="98分贝疯狂拼购" /></a></div>
  <div class="img dpn"><a href="http://www.zzjs.net" target="_blank" title="越夜越时尚"><img class="img_directly_load" src="http://images.mbaobao.com/activity/201007/09/event_night.jpg" style="width:725px; height:391px;" alt="越夜越时尚" /></a></div>
  <ul id="www_zzjs_net_txt_bg" class="panel">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="last"></li>
 </ul>
 <ul id="www_zzjs_net_txt" class="title">
    <li><a href="http://www.zzjs.net" target="_blank" title="夏日新品第25期">夏日新品第25期</a></li>
    <li><a href="http://www.zzjs.net" target="_blank" title="七夕情人专场">七夕情人专场</a></li>
    <li><a href="http://www.zzjs.net" target="_blank" title="2010钱包汇聚">2010钱包汇聚</a></li>
    <li><a href="http://www.zzjs.net" target="_blank" title="98分贝疯狂拼购">98分贝疯狂拼购</a></li>
    <li><a href="http://www.zzjs.net" target="_blank" title="越夜越时尚">越夜越时尚</a></li>
    </ul>
 <div id="www_zzjs_net_loding" class="loding"></div>
</div>
<script type="text/javascript"> 
//---------- start index focus
function www_zzjs_net_change()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 var self_now = 0;
 var self_speed = 5000;
 var self_auto_change = null;
 var self_max = $('#www_zzjs_net_box div.img').size();
 function self_change(i)
 {
  $('#www_zzjs_net_box div.img').hide();
  $('#www_zzjs_net_txt_bg li').removeClass('on');
  $('#www_zzjs_net_txt li').removeClass('on');
  $('#www_zzjs_net_box div.img:eq(' + i + ')').show();
  $('#www_zzjs_net_txt_bg li:eq(' + i + ')').addClass('on');
  $('#www_zzjs_net_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_zzjs_net_box div:first').show();
 $('#www_zzjs_net_txt_bg li:first').addClass('on');
 $('#www_zzjs_net_txt li:first').addClass('on');
 $('#www_zzjs_net_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_zzjs_net_loding').hide();
  self_auto_change = self_interval();
 });
}
www_zzjs_net_change();
//---------- end index focus
</script>
</body>
</html>

关于麦包包首页js图片切换代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010081364093.shtml方便下次再访问哦。

·上一篇： 当当网首页产品分类加亮效果css代码
·下一篇： 一款仿切片滤镜的JS焦点图，效果炫丽

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

麦包包首页js图片切换代码

文章分类LIST >>返回首页

最新游戏

最新新闻