HTML图集轮播实现-优快云博客

本文链接：https://blog.youkuaiyun.com/freejs/article/details/3094820

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>标题1</title>
<style>
*{padding:0px;MARGIN: 0px;
}
#shou_list ul li{LIST-STYLE-TYPE: none;
}
</style>
</head>
<body>
<div style="position: relative; width: 340px; height: 200px; z-index: 1; left: 10px; top: 15px;background:#eee" id="layer1" >
<div id="shou_list1" style="display:block;LIST-STYLE-TYPE: none;position: relative; width: 340px; height: 120px; z-index: 1; left: 0px; top: 0px;border:0px red solid">
<ul>
<li style="LIST-STYLE-TYPE: none;">
<div  style="position: relative; left:0px; top: 10px; width: 90px; height: 120px; z-index: 1;padding-top:10px;padding-left:10px;FLOAT:left;">
<img id="list_img" style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=0.2,gradientSize=0.5,motion=forward );" border="0" src="http://case.blueidea.com/files/2007/10/16/work_330571_2572_20071016_130451_2090454_t.jpg" width="100" height="100">
</div>
<div style="position: relative; left:0px; top: -10px; width: 220px; height: 120px; z-index: 1;padding-top:10px;padding-left:10px">
<h4 id="list_title">半夜三更还能看到此等精彩段子1</h4><br>
<span id="list_con" style="font-size:12px">连树上的孔雀在他头上拉屎，也全然不觉，1</span>
</div>
</li>
</ul>
</div>
<script>
var listImg=[];
listImg[1]="http://case.blueidea.com/files/2007/10/16/work_330571_2572_20071016_130451_2090454_t.jpg";
listImg[2]="http://case.blueidea.com/files/2007/10/16/work_391904_2577_20071016_185954_1501159_t.jpg";
listImg[3]="http://case.blueidea.com/files/2007/10/19/work_380874_2673_20071019_151147_8059998_t.jpg";
var listTitle=[];
listTitle[1]="半夜三更还能看到此等精彩段子1"
listTitle[2]="半夜三更还能看到此等精彩段子2"
listTitle[3]="半夜三更还能看到此等精彩段子3"
var listCon=[];
listCon[1]="连树上的孔雀在他头上拉屎，也全然不觉，1"
listCon[2]="连树上的孔雀在他头上拉屎，也全然不觉，2"
listCon[3]="连树上的孔雀在他头上拉屎，也全然不觉，3"
function getobjstyle(o){return document.getElementById(o).style}
var show_n=2
var show_max=3
function show(){
if (show_n>show_max)show_n=1;
with (document.getElementById("list_img")){
filters[0].Apply();
src=listImg[show_n];
filters[0].play();
}
document.getElementById("list_title").innerHTML=listTitle[show_n]
document.getElementById("list_con").innerHTML=listCon[show_n]
show_n++;
}
function MarqueeLinkBox(id, lh, speed, delay) {
var o = document.getElementById(id);
o.innerHTML+=o.innerHTML+o.innerHTML
var p = false;
var t;
o.style.overflow = "hidden";
o.style.lineHeight = lh + "px";
o.style.height = lh*3 + "px";

var temp
var so=document.getElementById("list_sp").getElementsByTagName("span");
for (var j=0;j<so.length;j++){
   so[j].index=j;
   so[j].onmouseover = function() { p = true;this.style.background="#dff"; temp_show(this)}
   so[j].onmouseout = function() {  p = false;this.style.background="#eee"; show_n=temp;}
}
function temp_show(obj){
ta=obj.index+1;
ta=((ta%3)==0)?3:(ta%3)
temp=show_n;
show_n=ta;
document.getElementById("list_img").src=listImg[show_n];
document.getElementById("list_title").innerHTML=listTitle[show_n]
document.getElementById("list_con").innerHTML=listCon[show_n]
}

function start() {
   t = setInterval(scrolling, speed);
   if (!p) o.scrollTop++;
}
function scrolling() {
   if ((o.scrollTop % lh) != 0) {
      o.scrollTop++;
      if (o.scrollTop >= o.scrollHeight - lh*3 - 1){
     var al=listImg.length-1
     var n=((al%3)==0)?3:(al%3)
         o.scrollTop = lh*n;
      }
   }
   else {
       clearInterval(t);
       setTimeout(start, delay);
       if (!p)show()
   }
}
setTimeout(start, delay);
}
</SCRIPT>
<div id="list" style="position: relative; width: 240px; height: 54px; z-index: 1; left: 0px; top: 0px;border:0px solid #00f; OVERFLOW: hidden;padding: 0px 10px">
<div id="list_sp">
<span id="list1" style="CURSOR: pointer;" onclick="show_n=0;show()">不想人生一场醉</span><br>
<span id="list2" style="CURSOR: pointer;" onclick="show_n=1;show()">名字可以这么长</span><br>
<span id="list3" style="CURSOR: pointer;" onclick="show_n=2;show()">一江冬水向春流</span><br>
</div></div>
<SCRIPT>
MarqueeLinkBox("list_sp",18,10,3000);
</SCRIPT>
</div>
</body>
</html>

纯js的图文切换效果