Javascript 实现的轮播图（原理及实现）

prtyaa 2023-12-26 18:48:43  52539

分类专栏：资讯

 // 兼容模式获取样式（不仅仅是内联样式）
           function getStyle(obj, name) { // 兼容模式获取样式（不仅仅是内联样式）
                               if (window.getComputedStyle) {
                                       return getComputedStyle(obj, null)[name];
                               } else {
                                       return obj.currentStyle[name];
                               }
                       }

轮播图处理：（功能实现但是比较粗糙，后续优化）

<!DOCTYPE html>
<html>
    <head>
        <title>js轮播图--刻意练习</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
                margin:0px;
                padding:0px;
            }
            #dynamic_pic{
                width:500px; /*固定图片的大小是 480 * 480  上下左右各有10px 的内边距*/
                height:480px;
                margin:20px auto;
                background-color:greenyellow;
                padding:10px 0;
                position:relative;
                overflow: hidden;
            }
            #dynamic_pic ul{
                list-style: none;
                position:absolute;
                top:10px;
                left:0px;
                width:1500px;
            }
            #dynamic_pic ul li{
                padding:0px 10px;
                float:left;
            }
            #dynamic_pic ul li img{
                width:480px;
                height:480px;
            }
            #dynamic_pic div{
                position:absolute;
                bottom:15px;
                left:212px;
            }
            #dynamic_pic div a{
                display:block;
                width:15px;
                height:15px;
                float:left;/* 设置超链接浮动 */
                margin:0 5px;
                background-color:red;
                opacity:0.8;
                /*兼容 IE8 设置透明度*/
                filter:alpha(opacity=80);
            }
            #dynamic_pic div a:hover{
                background-color:black;
            }



        </style>

        <script>

            window.onload = function () {

                var pic_index = 0;//图片数组的索引
                var timer; //定时器
                var images = ["testimg/1.jpg", "testimg/2.jpg", "testimg/3.jpg", "testimg/4.jpg", "testimg/5.jpg"]
                var rootDom = document.getElementById("dynamic_pic");
                var imgList = rootDom.getElementsByTagName("ul")[0];

                var navId = rootDom.getElementsByTagName("div")[0];

                for (i = 0; i < images.length; i++) {
                    var lidom = document.createElement("li");
                    var img = document.createElement("img");
                    img.setAttribute("src", images[i]);
                    lidom.appendChild(img);
                    imgList.appendChild(lidom);
                    var adom = document.createElement("a");
                    adom.setAttribute("href", "javascript:void(0)");
                    adom.setAttribute("class", "link");
                    if (i == 0) {
                        adom.style.backgroundColor = 'black';
                    }
                     adom.num=i;
                     adom.onclick=function(){
                         clearInterval(timer);
                         pic_index=this.num;
                         setFocus();
                         moveImage(imgList, "left", -500 * pic_index, 20, function () {
                                       autoChange();
                                });
                       return false;//阻止事件冒泡
                     }

                    navId.appendChild(adom);
                }
                /*中间的过渡效果*/
                var lidom = document.createElement("li");
                var img = document.createElement("img");
                img.setAttribute("src", images[0]);
                lidom.appendChild(img);
                imgList.appendChild(lidom);
                /*中间的过渡效果*/

                navId.style.left = Math.floor((500 - images.length * 15) / 2) + "px";
                imgList.style.width = 500 * (images.length+1) + "px";
                
                /*鼠标移动图片上的事件*/
                imgList.onmouseover=function(){
                      clearInterval(timer);
                }
                 /*鼠标移动图片上的事件*/
                imgList.onmouseout=function(){
                    autoChange();
                }
                
                 autoChange();
            function autoChange() {
                    timer = setInterval(function () {
                           pic_index++;
                            pic_index %= (images.length+1);
                           moveImage(imgList, "left", -500 * pic_index, 20, function () {
                                        setFocus();
                                });
                    }, 2000); 
            }
            


                 function setFocus() {
                                if (pic_index >= images.length) {
                                        pic_index = 0;
                                        imgList.style.left = 0;
                                } 
                                for (var i = 0; i < images.length; i++) {
               
                                        navId.getElementsByTagName("a")[i].style.backgroundColor = "";
                                }
                                navId.getElementsByTagName("a")[pic_index].style.backgroundColor = "black";
                        }


                 function moveImage(obj, attr, target, speed, callback) {
                              var current = parseInt(getStyle(obj, attr));
          
                              if (current > target) {
                                      speed = -speed;
                              }
                              //自定义对象定时器 防止对象之间的混乱操作 
                              clearInterval(obj.timer);
                              //alert(oldValue);
                              obj.timer = setInterval(function () {
                                      var oldValue = parseInt(getStyle(obj, attr));
                                      var newVal = oldValue + speed;
                                      //如果移动的越界 进行重置
                                      if ((speed < 0 && newVal <= target) || (speed > 0 && newVal >= target)) {
                                              newVal = target;
                                      }
                                      obj.style[attr] = newVal + "px";
                                      if (newVal == target) {
                                              clearInterval(obj.timer);
                                              callback && callback();//回掉函数 先判断 有就执行 没有不执行
                                      }  
                              }, 30);
                      }
      
                      //obj:获取样式元素
                       //name:获取样式名
                       function getStyle(obj, name) { // 兼容模式获取样式（不仅仅是内联样式）
                               if (window.getComputedStyle) {
                                       return getComputedStyle(obj, null)[name];
                               } else {
                                       return obj.currentStyle[name];
                               }
                       }
            }

        </script>
    </head>
    <body>
        <div id="dynamic_pic">
             <ul>
            </ul>
              <div>
            </div>
        </div>

    </body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31046

赞同 0

评论 0 条

Javascript 实现的轮播图（原理及实现）

相关文章

关注我们