信鸽网

JS实现简易图片轮播效果的方法

  作者：bea

本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下： 这里使用JS制作简易图片轮播效果： 制作比较粗糙，使用的图片是width：660ppx,height：550px; 效果图如下： 代码部分如下： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut

本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下：


这里使用JS制作简易图片轮播效果：


制作比较粗糙，使用的图片是width：660ppx,height：550px;


效果图如下：



代码部分如下：




<!DOCTYPE html> 

<html lang="en"> 

<head> 

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

 <title>JS幻灯代码</title> 

 <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 = "images/2.png";

   //使用图片宽660，高550 

   document.getElementById("third").src = "images/3.png"; 

   document.getElementById("four").src = "images/4.png"; 

  } 

  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="images/1.png" /></a> 

   <a target="_blank" href="#"><img id="second" /></a> 

   <a target="_blank" href="#"><img id="third" /></a> 

   <a target="_blank" href="#"><img id="four" /></a> 

  </div> 

  <ul> 

   <li>1</li> 

   <li>2</li> 

   <li>3</li> 

   <li>4</li> 

  </ul> 

 </div> 

</body> 

</html>


希望本文所述对大家的javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: