JS轮播图代码

最新推荐文章于 2023-09-17 14:12:21 发布

longjunx

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量416

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/longjunx/article/details/130034033

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin:0px;
               padding: 0px;

           }
           /*
           * 设置#out的样式
           */
           #outer{
               width: 520px;
               height: 333px;
               margin: 50px auto;

               background-color: greenyellow;
               padding: 10px 0px;
               position: relative;
               /*裁剪溢出的内容*/
               overflow: hidden;
           }
           #imgList {
               list-style: none;
               position: absolute;
               /*设置偏移量*/
               /*
               * 每向左移动520像素,则切换到下一张
               */

               position: absolute;
           /* 每向左移动520 就会显示下一张 */
           left: 0px;
               /*width: 2600px;*/

           }

           #imgList li{
               float: left;
               margin: 0 10px;
           }
           /*设置导航按钮*/
           #navDiv{
               /*开启绝对定位*/
               position: absolute;
               display: inline-block;
               bottom: 15px;
               left: 40%;
           }
           #navDiv a{
               /*设置超链接的浮动*/
               float: left;
               width: 15px;
               height: 15px;
               /*设置背景颜色*/
               background-color: red;
               opacity: 0.8;
               /*兼容IE8透明*/
               filter: alpha(opacity=80);
               margin: 3px 3px;
           }
           /*设置鼠标移入的效果*/
           #navDiv a:hover{
               background-color: bisque;
           }
       </style>
       
       <script type="text/javascript" src="js/tools.js">

       </script>
       <script type="text/javascript">
           window.οnlοad=function(){
               //设置imgList宽度
               //获取imgList
               var imgList=document.getElementById("imgList");
               //获取所有图片
               var imgArr=document.getElementsByTagName("img");
               //设置imgList宽度
               imgList.style.width=520*imgArr.length+"px";

               /*设置导航居中*/
               /*获取navDiv*/
               var navDiv=document.getElementById("navDiv");
               //获取outer
               var outer=document.getElementById("out");
               //设置navDiv的left值
               /*navDiv.style.left=(outer.offsetWidth - navDiv.offsetWidth)/2+"px";*/
               //默认显示图片的索引
               var index=0;
               //获取所有的a
               var allA=document.getElementsByTagName("a");

               //设置默认选中的效果
               allA[index].style.backgroundColor="bisque";

               /*
               * 点击超链接切换到指定的图片
               * -点击第一个超链接,跳转到第一个
               * -点击第二个超链接,跳转到第二个
               */
               //为所有的超链接绑定单击响应函数
               for(var i=0;i<allA.length;i++){

                   //为每一个超链接都添加number属性
                   allA[i].num=i;
                   //为超链接绑定单击响应函数
                   allA[i].οnclick=function(){

                       //获取点击超链接的索引,并将其设置为index
                       index=this.num;
                       //切换图片
                       /*
                       * 第一张 0 0
                       * 第二张 1 -520
                       * 第三张 2 -1040
                       *
                       */
                       //imgList.style.left=-520*index+"px";
                       //设置选中的a
                       setA();

                       //使用move函数切换图片
                       move(imgList,"left",-520*index,20,function(){

                       });
                   };
               }
               //创建一个方法用来设置选中的a
               function setA(){

                   //遍历所有的A,并将它们的背景颜色设置为红色
                   for(var i=0;i<allA.length;i++){
                       allA[i].style.backgroundColor="";

                   }
                   //将选中的a设置为
                   allA[index].style.backgroundColor="black";
               };
           };
       </script>
   </head>
   <body>
       
       <div id="outer">
           
           <ul id="imgList">
               <li>
                   <img src="img/A.png" width="500px" height="333px"/>
               </li>
               <li>
                   <img src="img/B.jpg" width="500px" height="333px"/>
               </li>
               <li>
                   <img src="img/C.png" width="500px" height="333px"/>
               </li>
               <li>
                   <img src="img/D.png" width="500px" height="333px"/>
               </li>
               <li>
                   <img src="img/E.png" width="500px" height="333px"/>
               </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>

longjunx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JS轮播图代码

/获取点击超链接的索引,并将其设置为index。//遍历所有的A,并将它们的背景颜色设置为红色。//为每一个超链接都添加number属性。//使用move函数切换图片。* -点击第一个超链接,跳转到第一个。* -点击第二个超链接,跳转到第二个。/* 每向左移动520 就会显示下一张 *///为超链接绑定单击响应函数。//为所有的超链接绑定单击响应函数。//设置navDiv的left值。//创建一个方法用来设置选中的a。--创建一个ul，用来防止图片-->--创建一个大的div,作为大的容器-->
复制链接

扫一扫