html无缝滚动图片代码 js图片左右滚动特效代码带编号

[复制链接]
查看298 | 回复0 | 2019-4-21 19:12:08 | 显示全部楼层 |阅读模式
网站之前使用一款滚动代码,最近发现有点问题,特重新找了一款代码,如下:

JS代码部分

function setqiehuantab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var qiehuanmenu = document.getElementByIdx_x_x(name+i);
var qiehuanmenudiv = document.getElementByIdx_x_x("con_"+name+"_"+i);
if(i==cursel){
  qiehuanmenu.className="off";
  qiehuanmenudiv.style.display="block";
}
else{
  qiehuanmenu.className="";
  qiehuanmenudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setqiehuantab(name_0,cursel_0);
}
var name_0='one';
var cursel_0=1;
var ScrollTime=5000;//循环周期(毫秒)
var links_len,iIntervalId;
onload=function(){
var links = document.getElementByIdx_x_x("qiehuantab1").getElementsByTagName_r('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links.onmouseover=function(){
  clearInterval(iIntervalId);
  this.onmouseout=function(){
  iIntervalId = setInterval(Next,ScrollTime);;
  }
}
}
document.getElementByIdx_x_x("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
  iIntervalId = setInterval(Next,ScrollTime);;
}
}
setqiehuantab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}

CSS部分:

<style type="text/css">
.qiehuantab1{width:258px; position:relative; }
.qiehuantab1 li{ list-style:none;}
.qiehuanmenu{ padding:2px;position:absolute; right:0; bottom:0; padding-bottom:25px;}
.qiehuanmenu li{float:left;width:20px;text-align:center;line-height:16px;height:16px;cursor:pointer;color:#000;font-size:12px;overflow:hidden; font-family:"微软雅黑",Verdana; margin:2px;}
.qiehuanmenudiv{height:443px;border-top:0;}
.qiehuanmenudiv img{ width:258px; height:423px; border:none;}
.qiehuanmenu .off{background:#4d9d79;color:#fff;font-weight:bold; width:26px; border:none;}

</style>

代码部分:

<!--切换代码开始-->
<div class="qiehuantab1" id="qiehuantab1">
  <div class="qiehuanmenu">
    <ul> <li id="one1">1</li> <li id="one2">2</li> <li id="one3">3</li> <li id="one4">4</li> <li id="one5">5</li>  </ul>
    </div>
    <div class="qiehuanmenudiv">
      <div id="con_one_1"> <a href="#" ><img src="/images/01.jpg" /></a>  </div>
      <div id="con_one_2" style="display:none;"> <a href="#" target="_blank"><img src="/images/02.jpg" /></a>  </div>
      <div id="con_one_3" style="display:none;"> <a href="#" target="_blank"><img src="/images/03.jpg" /></a> </div>
      <div id="con_one_4" style="display:none;"> <a href="#" target="_blank"><img src="/images/04.jpg" /></a> </div>
      <div id="con_one_5" style="display:none;"> <a href="#" target="_blank"><img src="/images/05.jpg" /></a> </div>
    </div>
</div>
<!--切换代码结束-->

注意红色代码中的5,是5张图片,如果你想用多张滚动图片,注意改动里面的“5”代码。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则