js图片自动轮播代码分享(js图片轮播)

最新推荐文章于 2024-09-11 23:16:45 发布

开着拖拉机的梦想家

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量5.1k

点赞数 1

轮播图

图片轮播

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
  }
  img {
   border: 0;
  }
  a {
   text-decoration: none;
  }
  #slide {
   width: 800px;
   height: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
  }
  #slide ul {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 400px;
   width: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: hidden;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
  }
  #slide .ico a {
   display: inline-block;
   width: 10px;
   height:10px;
   background: url(out.png) no-repeat 0px 0px;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   width: 60px;
   height: 400px;
   left: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnLeft :hover {
   background: url() no-repeat 0px 0px;
  }
  #btnRight {
   width: 60px;
   height: 400px;
   right: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnRight :hover {
   background: url() no-repeat 0px 0px;
  }  

 </style>

 <script type="text/javascript">
  window.onload = function() {
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a");
   var oSlide = document.getElementById("slide");
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
   var oBtnLeft = document.getElementById("btnLeft");
   var oBtnRight = document.getElementById("btnRight");

   var baseWidth = aLi[0].offsetWidth;
   //alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length + "px";
   var iNow = 0;
   for(var i=0;i<aBtn.length;i++) { 
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl[0].style.left);
     move(this.index);
     //aIco[this.index].className = "active";
    }
   }
   oBtnLeft.onclick = function() {
    iNow ++;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow --;
    document.title = iNow;
    move(iNow);
   }

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex += 1;
    }
   }
   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length - 1;
     iNow = index;
    }
    for(var n=0;n<aBtn.length;n++) {
     aBtn[n].className = ""; 
    }
    aBtn[index].className = "active";
    oUl[0].style.left = -index * baseWidth + "px";
    //buffer(oUl[0],{
    // left: -index * baseWidth
    // },8)

   }
  }
  </script>
  </head>
<body>
 <div id="slide">
  <a id="btnLeft" href="javascript:void(0);" ></a>
  <a id="btnRight" href="javascript:void(0);" ></a>
  <!--when change next image:style="left: -(n-1)*800px;"-->
  <ul>
   <li><img src="1.jpg" alt="" /></li>
   <li><img src="2.jpg" alt="" /></li>
   <li><img src="3.jpg" alt="" /></li>
   <li><img src="4.jpg" alt="" /></li>
   <li><img src="5.jpg" alt="" /></li>
   <li><img src="6.jpg" alt="" /></li>
  </ul>
  <div id="ico" class="ico"> 
   <a class="active" href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
   <a href="javascript:void(0);"></a>
  </div>
 </div>
</body>
</html>

图片自动播放

 <body>
  <script type="text/javascript"> 
  var curIndex = 0; 
  var timeInterval = 1000; 
  var arr = new Array(); 
  arr[0] = "1.jpg"; 
  arr[1] = "2.jpg"; 
  arr[2] = "3.jpg"; 
  arr[3] = "4.jpg"; 
  arr[4] = "5.jpg"; 
  arr[5] = "6.jpg"; 
  arr[6] = "7.jpg"; 
  setInterval(changeImg,timeInterval); 
  function changeImg() { 
   var obj = document.getElementById("obj"); 
   if (curIndex == arr.length-1) { 
    curIndex = 0; 
   } else { 
    curIndex += 1; 
     } 
   obj.src = arr[curIndex]; 
  } 
 </script> 
 </head> 
 <body> 
  <img id = "obj" src = "1.jpg" border = 0 /> 
 </body>

代码轮播 [1][2][3][4]形式，鼠标移上图片改变

效果图

<body>
 <script type="text/javascript"> 
  window.onload = function () { 
   flag = 0; 
   obj1 = document.getElementById("slider"); 
   obj2 = document.getElementsByTagName("li"); 
   obj2[0].style.backgroundColor = "#666666";
   //默认被选中颜色 
   time = setInterval("turn();", 5000); 
   obj1.onmouseover = function () { 
    clearInterval(time); 
   } 
   obj1.onmouseout = function () { 
    time = setInterval("turn();", 6000); 
   } 
  
   for (var num = 0; num < obj2.length; num++) { 
    obj2[num].onmouseover = function () { 
     turn(this.innerHTML); 
     clearInterval(time); 
    } 
    obj2[num].onmouseout = function () { 
     time = setInterval("turn();", 6000); 
    } 
   } 
   //延迟加载图片，演示的时候，使用本地图片
   //上线后请改为二级域名提供的图片地址 
   document.getElementById("second").src = "2.jpg";
   //使用图片宽660，高550 
   document.getElementById("third").src = "3.jpg"; 
   document.getElementById("four").src = "4.jpg"; 
  } 
  function turn(value) { 
   if (value != null) { 
    flag = value - 2; 
   } 
   if (flag < obj2.length - 1) 
    flag++; 
   else
    flag = 0; 
   obj1.style.top = flag * (-550) + "px"; 
   for (var j = 0; j < obj2.length; j++) { 
    obj2[j].style.backgroundColor = "#ffffff"; 
   } 
   obj2[flag].style.backgroundColor = "#666666"; 
  } 
 </script> 
 <style type="text/css">
  #wrap 
  { 
   height: 550px; 
   width: 660px; 
   overflow: hidden; 
   position: relative; 
   overflow: hidden; 
  }
  #wrap ul 
  { 
   list-style: none; 
   position: absolute; 
   top: 500px; 
   left: 450px; 
  }
  #wrap li 
  { 
   margin-left:2px; 
   opacity: .3; 
   filter: alpha(opacity=30); 
   text-align: center; 
   line-height: 30px; 
   font-size: 20px; 
   height: 30px; 
   width: 30px; 
   background-color: #fff; 
   float: left; 
   border-radius:3px; 
   cursor:pointer; 
  }
  #slider 
  { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
  }
  #slider img 
  { 
   float: left; 
   border: none; 
  } 
 </style> 
</head> 
<body> 
 <div id="wrap"> 
  <div id="slider"> 
   <a target="_blank" href="#"><img src="1.jpg" width="660px" height="550px"/></a> 
   <a target="_blank" href="#"><img id="second"  width="660px" height="550px"/></a> 
   <a target="_blank" href="#"><img id="third"  width="660px" height="550px"/></a> 
   <a target="_blank" href="#"><img id="four"  width="660px" height="550px"/></a> 
  </div> 
  <ul> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
  </ul> 
 </div> 
</body>

自动往上滚动，鼠标移上就停止，移开继续

<body>
 
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
 
<div id="colee1">
 
<p><img src="1.jpg"   width="660px" height="550px"></p>
 
<p><img src="2.jpg"   width="660px" height="550px"></p>
 
<p><img src="3.jpg"   width="660px" height="550px"></p>
 
<p><img src="4.jpg"   width="660px" height="550px"></p>
 
<p><img src="5.jpg"   width="660px" height="550px"></p>
 
<p><img src="6.jpg"   width="660px" height="550px"></p>
 
</div>
 
<div id="colee2"></div>
 
</div>
 
<script>
 
var speed=30;
 
var colee2=document.getElementById("colee2");
 
var colee1=document.getElementById("colee1");
 
var colee=document.getElementById("colee");
 
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
 
function Marquee1(){
 
//当滚动至colee1与colee2交界时
 
if(colee2.offsetTop-colee.scrollTop<=0){
 
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 
 }else{
 
 colee.scrollTop++
 
}
 
}
 
var MyMar1=setInterval(Marquee1,speed)//设置定时器
 
//鼠标移上时清除定时器达到滚动停止的目的
 
colee.οnmοuseοver=function() {clearInterval(MyMar1)}
 
//鼠标移开时重设定时器
 
colee.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}
 
</script>
</body>

先这些，以后有好的方法在更新