仿当当网首页js图片切换特效

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

仿当当网首页6屏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">
<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>
<style type="text/css">
/*公用部分*/
*{margin:0;padding:0}
a{ text-decoration:none; color:#1a66b3; }
a:hover{text-decoration:underline;color:#1a66b3;}
img{border:0;}
* ul,* ol,* li {list-style:none}
/*轮转*/
.www_wuming_ren{ width:416px; height:198px; margin:100px; border:1px solid #c8c8c8; float:left; position:relative}
/*轮转样式*/
.www_wuming_ren .main{overflow:hidden;height:198px;width:416px; display:block;}
.www_wuming_ren .main img{display: block;*display:inline-block;_display:inline-block}
.www_wuming_ren_dummy{ position:absolute; bottom:0; left:0; z-index:20;height:23px; width:416px;filter:alpha(opacity=30)}/*10-5-31 qsy修*/
.www_wuming_ren_num{ position:absolute; bottom:0; left:0; z-index:30; height:20px; width:407px; padding:2px 5px 0px 0px; text-align:right;}
.www_wuming_ren_num ul{margin:0;padding:0;list-style-type:0;float:right;}
.www_wuming_ren_num li{ display:block; float:left; padding-left:2px; width:19px; height:20px;cursor:pointer;}
.www_wuming_ren_num span{ display:block; float:right; padding-left:5px;width:19px; height:20px}/*10-3-11 qsy修改*/
.www_wuming_ren_num a{ display:block; background:url(/img/20240318_www_wuming_ren_16.gif) no-repeat 0 0; font:bold 11px/11px Arial; color:#fff; text-align:center; width:19px; height:17px; padding-top:3px; *height:16px; *padding-top:4px}
.www_wuming_ren_num a:hover{ text-decoration:none; background:url(/img/20240318_www_wuming_ren_17.gif) no-repeat 0 0; color:#fff}
.www_wuming_ren_num .nonce a{ background:url(/img/20240318_www_wuming_ren_17.gif) no-repeat 0 0}
</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>
<div class="www_wuming_ren" id="__E">
<div class="www_wuming_ren_dummy"></div>
      <div class="www_wuming_ren_num" id="myTab_btns2">
          <ul>
              <li  class="nonce"><a href="#">1</a><li><a href="#">2</a><li><a href="#">3</a><li><a href="#">4</a><li><a href="#">5</a><li><a href="#">6</a>     </ul>
      </div>
<div class="main" id="main2">
        <ul>
<li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_18.jpg" alt="90后e时代生活" width="416" height="198" /></a></li><li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_19.jpg" alt="百货全场 全网最低" width="416" height="198"/></a></li><li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_20.jpg" alt="慢活族经典品味专区" width="416" height="198"/></a></li><li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_21.jpg" alt="清凉夏装 号令天下" width="416" height="198"/></a></li><li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_22.jpg" alt="外语考试云霄飞车" width="416" height="198"/></a></li>    <li><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240318_www_wuming_ren_23.jpg" alt="谁的青春有我狂" width="416" height="198"/></a></li>        </ul><script language="javascript">var bannercount=5</SCRIPT>
</div>
    </div>
<script language="javascript">
var Ex=function (o){for(var k in o)this[k]=o[k];return this}
var UI=function (id){return document.getElementById(id)}
var UIs=function (tag){return Ex.call([],this.getElementsByTagName(tag))}
var Each=function (a,fn){for(var i=0;i<a.length;i++)fn.call(a[i],i,a)}
var dhooo=function (ini){
this.bind(ini,this);
this.autoIndex=0;
};
Ex.call(dhooo.prototype,{
bind:function (ini,me){
var dir=ini.dir=='top'?'scrollTop':'scrollLeft',pan=UI(ini.contentID);
var start=function (o){
Each(ini.btns,function(){this.className=''});
o.className=ini.className;
me.autoIndex=o.index;
me.begin(o.index,pan,ini.len,dir);
};
pan.onmouseover=function (){me.stop=true};
Each(ini.btns,function (i){
this.index=i;
this.onmouseover=function (){me.stop=true;start(this)};
pan.onmouseout=this.onmouseout=function(){me.stop=false}
});
var auto=function(){
if(!me.stop){
me.autoIndex=me.autoIndex==bannercount?0:++me.autoIndex;
start(ini.btns[me.autoIndex]);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
};
if(ini.auto)this.autoPlay=window.setInterval(auto,5000);
}
,begin:function (i,o,len,dir){
    var img=o.getElementsByTagName("li");
    if(document.all)
        img[i].childNodes[0].childNodes[0].style.filter="alpha(opacity=0)";
    else
        img[i].style.opacity=0.05;
    var diff=(i*len-o[dir])*1;
o[dir]+=Math[diff>0?'ceil':'floor'](diff);
var opacitynum=0;
(function (me){
clearInterval(me.only);
me.only=setInterval(function (){
opacitynum+=0.05;
if(document.all)
    img[i].childNodes[0].childNodes[0].style.filter="alpha(opacity="+opacitynum*100+")";
else
img[i].style.opacity=opacitynum;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
if(opacitynum>=1)clearInterval(me.only);
},10)
})(this)
}
})
if(!isIE_8()){
    if(isIE_c()){
    new dhooo({
    btns:UIs.call(UI('myTab_btns2'),'LI')
    ,className:'nonce'
    ,contentID:'main2'
    ,len:202
    ,dir:'top'
    ,auto:true
    });
    }else{
        new dhooo({
            btns:UIs.call(UI('myTab_btns2'),'LI')
            ,className:'nonce'
            ,contentID:'main2'
            ,len:198
            ,dir:'top'
            ,auto:true
            });
    }
}else{
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
    new dhooo({
    btns:UIs.call(UI('myTab_btns2'),'LI')
    ,className:'nonce'
    ,contentID:'main2'
    ,len:198
    ,dir:'top'
    ,auto:true
    });
}
function showhide_divU(showdivid,hidedivid){
    if($(showdivid)!=null){
        $(showdivid).style.display="";
        if(showdivid=='guanzhu')
            $(showdivid+"_title").className="nonce";
        else
            $(showdivid+"_title").className="other nonce";
    }
    if($(hidedivid)!=null){
        $(hidedivid).style.display="none";
        if(hidedivid=='huodong')
            $(hidedivid+"_title").className="other";
        else
            $(hidedivid+"_title").className="";
    }
}
//ff兼容
function isIE_c(){
    if(window.navigator.userAgent.toLowerCase().indexOf("msie 8.0")>1)
        return false;
   return window.navigator.userAgent.toLowerCase().indexOf("msie")>=1?true:false;
}
function isIE_8(){
    if(window.navigator.userAgent.toLowerCase().indexOf("msie 8.0")>1)
        return true;
    else
        return false;
}
function scrollImg(){
    var posX,posY;
    if (window.innerHeight) {
        posX = window.pageXOffset;
        posY = window.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        posX = document.documentElement.scrollLeft;
        posY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        posX = document.body.scrollLeft;
        posY = document.body.scrollTop;
    }
    if(document.body.clientWidth>1024){
    posX=970+((document.body.clientWidth-960)/2);
    }else{
    posX=950+((document.body.clientWidth-960)/2);
    }
    var ad=$("feedback");
    ad.style.top=(posY+100)+"px";
    ad.style.left=(posX)+"px";
    setTimeout("scrollImg()",100);
}
</script>
</div>
</body>
</html>


赞0
踩0
☆收藏0

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

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

图片切换右下角编号
回帖

仿当当网首页js图片切换特效 期待您的回复！

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

取消确定

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