轮播图，焦点hover，图片缓动效果

来源：互联网发布：savor it 编辑：程序博客网时间：2024/04/28 19:36
轮播图，焦点hover，图片缓动效果，其中标记焦点的1，2,3序号，根据图片自动生成
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播图焦点</title>    <style>    *{        padding: 0;        margin: 0;    }    ul{        list-style: none;    }        .scroll{            width: 300px;            height: 200px;            border: 1px solid red;            margin: 100px auto;            position: relative;        }        .scroll ul.imgUl{            width: 400%;            position: absolute;            top: 0;            left: 0;        }        .scroll ul.imgUl li{            float: left;        }        .scroll .imgUl img{            vertical-align: middle; /* 消除图片间3px的间距 */        }        .scroll ul.focus{            position: absolute;            left: 50%;            bottom: 10px;            margin-left: -80px;        }        .scroll ul.focus li{            width: 20px;            height: 20px;            padding: 5px;            text-align: center;            margin-right: 10px;            border: 2px solid yellow;            float: left;            color: red;            font-weight: 700;            background-color: #333;            color: white;        }        .scroll ul.focus li.current{            background-color: deeppink;        }    </style>    <script>        window.onload = function(){            function $(id){ return document.getElementById(id);}            var imgul = $('images');            var focusUl = $('focuses');            var imgLis = imgul.children;            for(var i=0; i< imgLis.length; i++){                var newLi = document.createElement('li');                newLi.innerHTML=i+1;                focusUl.appendChild(newLi);            }            var focusLis = focusUl.children;            for(var i=0; i<focusLis.length; i++){                focusLis[i].index = i;                focusLis[i].onmouseover = function(){                    for(var j=0; j<focusLis.length;j++){                        focusLis[j].className="";                    }                    this.className="current";                    target = -this.index * 300;                }            }            var leader = 0, target = 0;            //缓动效果，先快后慢            setInterval(function(){                leader = leader + (target - leader) / 10;                imgul.style.left = leader +"px";            } ,30);        }    </script></head><body>    <div class="scroll">        <ul class="imgUl" id="images">            <li><img src="images/01.jpg" alt=""></li>            <li><img src="images/02.jpg" alt=""></li>            <li><img src="images/03.jpg" alt=""></li>            <li><img src="images/04.jpg" alt=""></li>        </ul>        <ul class="focus" id="focuses">        </ul>    </div></body></html>
0 0