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

前端技术 2023/09/04 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9028

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案