JAVASCRIPT 图片轮播

最新推荐文章于 2024-07-30 10:56:44 发布

旮旯风行

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量188

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/liumin_txgt/article/details/105654827

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}

   #outer{
   width:1024px; //图片的尺寸大小
   height:600px;
   margin:50px auto; //图片的居中处理
   background-color:greenyellow;
   padding:10px; //上下左右的边距
   position:relative; // 相对位置
overflow:hidden; // 超出设置范围的不可见
   }
   #imgList{
   list-style:none; //去掉项目符号前面的点
   width:5220px; //所有图片横着放的宽度 javascript调整
   position:absolute; //绝对位置，父元素开启相对定位
   left:-1044px; //兼容如果没有设置IE浏览器返回auto
   }
   #imgList li{
   float:left; // 向左浮动
   margin:0 10px; //图片与图片的间距
   }

   #navDiv{
   position:absolute; //绝对定位
   bottom:20px; // 距离底边的位置
   left:473px; //520-
   }
   #navDiv a{
   float:left; //浮动内联元素变成块元素
   width: 15px; //设置块大小
   height: 15px;
   background-color:red;
   margin:0 15px; //上下不要设置左右距离
   opacity:0.5; //设置透明兼容IE8

filter：alpha(opacity=50);
}
</style>

var index=0;
var allA=document.getElementsByTagName("a");
allA[index].style.backgroundColor="#000000";

for(var i=0;i<allA.length;i++){
       allA[i].num=i;
   allA[i].οnclick=function(){
   index=this.num;
   imgList.style.left=-1044*index+"px";
   setA();
   }
   }
   function setA(){
   for (var i=0;i<allA.length ;i++ )
   {
       allA[i].style.backgroundColor="red";
   }
   allA[index].style.backgroundColor="black";
   }
   };
</script>
<body>
<div id="outer">
<ul id="imgList">
   <li ><img src="img/1.jpg"/></li>
   <li ><img src="img/2.jpg"/></li>
   <li ><img src="img/3.jpg"/></li>
   <li ><img src="img/4.jpg"/></li>
   <li ><img src="img/5.jpg"/></li>
   </ul>
   <div id="navDiv">
   <a href="javascript:;"></a>
   <a href="javascript:;"></a>
   <a href="javascript:;"></a>
   <a href="javascript:;"></a>
   <a href="javascript:;"></a>
   </div>
   </div>

</body>
</html>

旮旯风行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVASCRIPT 图片轮播

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...
复制链接

扫一扫

专栏目录