js实现图片滚动的代码,js实现图片轮换效果代码

复制代码 代码如下:

 js图片滚动代码:

复制代码 代码如下:

<!–文件头模板–>
<SCRIPT src=top.js></SCRIPT>
<SCRIPT language=javascript>
    writeTop(‘Flash滚动呈现图片代码生成’,’二〇〇五-10-18′);
</SCRIPT>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文书档案</title>
<style type=”text/css”>
*{
    padding:0px;
    margin:0px;
    }

li{
    height:150px;
    width:200px;
    float:left;
    margin:10px;
    }

ul{
    width:880px;
    height:170px;
    list-style-type: none;
    background-color:#FFF;
    position:absolute;
    left:0;
    top:0;

    }
    
js实现图片滚动的代码,js实现图片轮换效果代码。div{
    width:880px;
    height:170px;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FF0000;
    position:relative;
    overflow:hidden;
    }

</style>
<script>
var f=-1;//新建多少个全局变量
function le()//点击向左调用的章程
{
    f=-1;
    }
function re()//点击向右调用的不二等秘书诀
{
    f=1;
    }
window.onload=function (){
    odiv=document.getElementById(‘div’);//获取div
    oul=document.getElementById(‘ul’);//获取ul
    oul.innerHTML=oul.innerHTML+oul.innerHTML; //复制一份ul 里的内容
    oul.style.width=oul.offsetWidth*2+’px’;//应为ul
里的内容比原先多了一倍所以宽也要比原先多一倍
    
    
    //完成图片滚动的函数
    function cc (){
        //推断图片滚动的职分  向左时的气象
        if(oul.offsetLeft<-oul.offsetWidth/2)
        {            
            oul.style.left=0+’px’;
            }
            
                //决断图片滚动的岗位  向右时的情状
                if(oul.offsetLeft>0)
        {            
            oul.style.left=-oul.offsetWidth/2+’px’;
            }
               //f为 上边的全局变量  为 正则是向右  为负则是向左
        oul.style.left=oul.offsetLeft+f+’px’;
        }
        //定时器
    var time=setInterval(cc,10);
     //鼠标移动到div上时 甘休计时器
    odiv.onmouseover=function (){
            clearInterval(time);
            
            };
            //鼠标移出div时 在次运转沙漏
    odiv.onmouseout=function (){
            time=setInterval(cc,10);
            
            };

    };
</script>
</head>

<body>
<a href=”javascript: le()”>向左</a>
<a href=”javascript: re()”>向右</a>
<div id=”div”>
 <ul id=”ul”>
   <li><img src=”img/1.jpg” height=”150″ 
width=”200″/></li>
   <li><img src=”img/2.jpg” height=”150″  width=”200″
/></li>
   <li><img src=”img/3.jpg” height=”150″ 
width=”200″/></li>
   <li><img src=”img/4.jpg” height=”150″ 
width=”200″/></li>
 </ul>
</div>
</body>
</html>
上边五个a标签 是决定图片滚动的走向

主假若div  ul  li  <img> 的组织      div里面是ul 人后是li
里面是图形img 标签

让li 有变化 然后给 div 加二个左右异地距自动    在给 div 四个针锋相对固化 
ul三个纯属定位

概略的布局就大概了

滚动的差不离思路便是,通过css定位和js测量时间的装置 改动ul 的left 属性
来贯彻滚动。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title></title>
<script type=”text/javascript”>
var numb = 0;
var imgnumb = 1;
function showimg() {
//两张图纸切换格局1 /*numb++;
if (numb % 2 == 0) {
document.getElementById(‘img1’).setAttribute(‘src’, ‘images/1.jpg’);
}
else {
document.getElementById(‘img1’).setAttribute(‘src’, ‘images/2.jpg’);
}*/
//两张图纸切换方式2 /*if (numb == 0) {
document.getElementById(‘img1’).setAttribute(‘src’, ‘images/2.jpg’);
numb = 1;
}
else {
document.getElementById(‘img1’).setAttribute(‘src’, ‘images/1.jpg’);
numb = 0;
}*/
}
/图片轮换/多张 function imgfor() {
imgnumb++;
document.getElementById(‘img1’).setAttribute(‘src’, ‘images/’ + imgnumb

<!–以下为剧情–>
<SCRIPT>
//运转代码
function runEx(cod1)  {
     cod=document.getElementById(cod1)
      var code=cod.value;
      if (code!=””){
          var newwin=window.open(”,”,”);  
          newwin.opener = null 
          newwin.document.write(code);  
          newwin.document.close();
    }
}
//复制代码
function doCopy(ID) { 
    if (document.all){
         textRange = document.getElementById(ID).createTextRange(); 
         textRange.execCommand(“Copy”); 
    }
    else{
         alert(“此意义只可以在IE上有效性”)
    }
}

!DOCTYPE html PUBLIC -//W3C//DTD
XHTML 1.0 Transitional//EN
html
xmlns=…

  • ‘.jpg’);
    if (imgnumb == 9) {
    imgnumb = 0;
    }
    }
    var clearid;
    function clearfun() {
    clearInterval(clearid);
    }
    clearid=setInterval(imgfor, 1000);
    </script>
    </head>
    <body>
    <img alt=”” id=”img1″ class=”style1″ src=”images/1.jpg” width=”500px”
    height=”500px” />
    <input type=”button” value=”两张图片切换” onclick=”showimg();”
    />
    <br />
    <input type=”button” value=”多张图片轮换” onclick=”imgfor();;”
    />
    <br />
    <input type=”button” value=”甘休试行” onclick=”clearfun();” />
    </body>
    </html>

//展开_收起段落
function close_open(theID){
    if(document.getElementById(theID).style.display!=’none’) {
        document.getElementById(theID).style.display=’none’;
    }
    else 
        document.getElementById(theID).style.display=’block’;
}
</SCRIPT>

你也许感兴趣的稿子:

  • 轻易的js图片轮换代码(js图片轮播)
  • 卷入了二个js图片轮换效果的函数
  • javascript
    图片轮换展现效果代码
  • 能够的js
    tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
  • js
    乐乎的一个图纸播放图片轮换效果代码
  • 精神超强的JS图片轮换特效
  • 多浏览器包容的qq图片轮换效果javascript代码
  • 用javascript实现的仿Flash广告图片轮换效果
  • jb51站长推荐的用js落成的多浏览器扶助的图片轮换展现效果ie,firefox
  • 全盘的js图片轮换效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图