做下标记,下面为6x4个文章图文资讯动态显示代码,保存备忘.
代码位置在<div class="text_tag">和<div class="box_xg">之间...
<div class="box_xgimg_l">
<script type="text/javascript">
var t_u = null;
var t_u_old = null;
var maxPic = 6;
var showPic = 0;
function switchPic(curPic){
if(curPic == maxPic){
showPic = 1;
}else{
showPic = showPic + 1;
}
for(i=1; i <= maxPic; i++){
if(i == showPic){
document.getElementById("picA"+i).className = "currON";
document.getElementById("picUL"+i).style.display = "";
}else{
document.getElementById("picA"+i).className = "";
document.getElementById("picUL"+i).style.display = "none";
}
}
}
function reSwitchPic() {
clearTimeout(t_u);
switchPic(showPic);
t_u = setTimeout('reSwitchPic();', 5000);
}
function pauseSwitch() {
clearTimeout(t_u);
t_u_old = t_u;
}
function selectSwitch(num) {
showPic = num;
for(i=1; i <= maxPic; i++){
if(i == num){
document.getElementById("picA"+i).className = "currON";
document.getElementById("picUL"+i).style.display = "";
}else{
document.getElementById("picA"+i).className = "";
document.getElementById("picUL"+i).style.display = "none";
}
}
}
function goonSwitch() {
clearTimeout(t_u);
t_u = setTimeout('reSwitchPic();', 5000);
}
$(function(){
$("a[_for]").mouseover(function(){
$(this).parents().children("a[_for]").removeClass("thisclass").parents().children("dd").hide();
$(this).addClass("thisclass").blur();
$("#"+$(this).attr("_for")).show();
});
$("a[_for=uc_member]").mouseover();
$("a[_for=flink_1]").mouseover();
});
function CheckLogin(){
var taget_obj = document.getElementById('_userlogin');
myajax = new DedeAjax(taget_obj,false,false,'','','');
myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php");
DedeXHTTP = null;
}
</script>
<div class="title_xg">
<div style="float:left;padding-left:-10px;text-align:left;"><b>文章图文资讯</b></div>
<span style="float:right;padding-right:10px;font-size:12px;font-weight:normal;">
<a href="javascript://" class="currON" id="picA1" onclick="selectSwitch(1)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">1</a>
<a href="javascript://" id="picA2" onclick="selectSwitch(2)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">2</a>
<a href="javascript://" id="picA3" onclick="selectSwitch(3)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">3</a>
<a href="javascript://" id="picA4" onclick="selectSwitch(4)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">4</a>
<a href="javascript://" id="picA5" onclick="selectSwitch(5)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">5</a>
<a href="javascript://" id="picA6" onclick="selectSwitch(6)" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">6</a>
</span>
</div>
<div class="roll" id="roll" style="margin-left:0px;padding-left:0px;">
<ul id="picUL1" onmouseover="pauseSwitch()" onmouseout="goonSwitch()">
{dede:arclist typeid='1,2,3,4'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a>
</div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<ul id="picUL2" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;">
{dede:arclist typeid='5,6,7,8'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a></div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<ul id="picUL3" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;">
{dede:arclist typeid='9,10,11,12,13'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a></div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<ul id="picUL4" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;">
{dede:arclist typeid='14,15,16,17'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a></div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<ul id="picUL5" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;">
{dede:arclist typeid='1,3,5,7,9'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a></div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<ul id="picUL6" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;">
{dede:arclist typeid='2,4,6,8,10'titlelen=20 row=4 flag='p' orderby='pubdate'}
<li>
<div><a href="[field:arcurl/]"><img src="[field:litpic/]" width="121" height="91" alt="" /></a></div>
<p><a href="[field:arcurl/]">[field:title/]</a></p>
</li>
{/dede:arclist}
</ul>
<script type="text/javascript">reSwitchPic();</script>
</div>
</div>
