经典实用的js图片切换特效分享

这个图片切换特效兼容多种浏览器，很多网站用的js图片切换特效代码，现在拿出来共享，希望这个图片切换代码对您有所帮助。

<style type="text/css" media="screen">
*{margin:0;padding:0;}
body {
margin:0;
padding:0;
font-size:12px;
font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;
}
img {
border:none;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
.slider {
position:relative;
width:500px;
height:380px;
}
.slider .pic {}
.slider .pic img {
width:500px;
height:380px;
}
.slider .num {
z-index:2;
position:absolute;
right:2px;
bottom:2px;
width:95px;
height:16px;
}
.slider .num li {
float:left;
display:inline;
width:16px;
height:16px;
line-height:16px;
margin-left:3px;
text-align:center;
color:#595959;
cursor:pointer;
}
.slider .num li.current {
background-color:#ffffff;
font-weight:bold;
color:#ff4e00;
}
.slider .bg {
z-index:1;
position:absolute;
right:2px;
bottom:2px;
width:95px;
height:16px;
}
.slider .bg li {
float:left;
display:inline;
width:16px;
height:16px;
line-height:16px;
margin-left:3px;
background-color:#fff;
filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
text-align:center;
color:#595959;
font-size:0;
}
</style>
<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="slider" style="height:380px; overflow:hidden">
  <ul class="num" id="homePushName">
    <li id="homeAd0" class="current">1</li>
    <li id="homeAd1">2</li>
    <li id="homeAd2">3</li>
    <li id="homeAd3">4</li>
    <li id="homeAd4">5</li>
  </ul>
  <ul class="bg" id="homePushBg">
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
  </ul>
  <ul class="pic" id="homePushShow">
<li id="homePushShow1" style="height:380px; overflow:hidden;">
<a href="https://www.wuming.ren" target="_blank" title="各种信息免费发布，资源共享合作共赢!"><img src="/img/20240320_www_wuming_ren_6.jpg"/></a>
</li>
<li id="homePushShow2" style="height:380px; overflow:hidden;">
<a href="https://www.wuming.ren" target="_blank" title="各种信息免费发布，资源共享合作共赢!"><img src="/img/20240320_www_wuming_ren_7.jpg"/></a>
</li>
<li id="homePushShow3" style="height:380px; overflow:hidden;">
<a href="https://www.wuming.ren" target="_blank" title="三号广告图片说明信息"><img src="/img/20240320_www_wuming_ren_8.jpg"/></a>
</li>
<li id="homePushShow4" style="height:380px; overflow:hidden;">
<a href="https://www.wuming.ren" target="_blank" title="四号广告图片说明信息"><img src="/img/20240320_www_wuming_ren_9.jpg"/></a>
</li>
<li id="homePushShow5" style="height:380px; overflow:hidden;">
<a href="https://www.wuming.ren" target="_blank" title="五号广告图片说明信息"><img src="/img/20240320_www_wuming_ren_10.jpg"/></a>
</li>
</ul>
</div>
<script type="text/javascript">
var listItem=document.getElementById("homePushShow");
var tList=document.getElementById("homePushName").childNodes;
var controlItem=[];
for(var i=0;i<tList.length;i++){
if(tList[i].nodeName.toLowerCase()=="li"){
controlItem.push(tList[i]);
}
}
var picCount=controlItem.length;
var cid=0;
var tid=Math.floor(Math.random()*picCount);
window.cTop=0
window.gTop=0;
window.speed=0;
window.controlAction="";
window.timeCount=0;
setInterval(function(){
if(cid!=tid){
gTop=tid*380;
speed=(gTop-cTop)/10;
cid=tid;
for(var i=0;i<picCount;i++){
controlItem[i].className=((i==cid)?"current":"");
}
}
if(window.cTop!=window.gTop){
window.cTop+= parseInt(speed);
listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
}
document.getElementById("homePushBg").style.display="block";
document.getElementById("homePushName").style.display="block";
},20);
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
for(var i=0;i<picCount;i++){
controlItem[i].onmouseover=function(){
var goId=parseInt(this.innerHTML)-1;
clearTimeout(window.controlAction);
window.controlAction=setTimeout(function(){
tid=goId;
timeCount=0;
},300);
}
controlItem[i].onmouseout=function(){
clearTimeout(window.controlAction);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
setInterval(function(){
timeCount+=1
if(timeCount>=5){
window.controlAction=setTimeout(function(){
tid=tid+1;
if(tid>=picCount){tid=0;}
},20);
timeCount=0;
}
},1000);
</script>