轮播图

最新推荐文章于 2022-04-10 16:16:23 发布

honkaiimpac

最新推荐文章于 2022-04-10 16:16:23 发布

阅读量90

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
<body>
<div class="all"  id="box">
    <div class="screen">

        <ul>
            <li><img src="images/1.jpg" width="500px" height="200px" alt=""></li>
            <li><img src="images/2.jpg" width="500px" height="200px" alt=""></li>
            <li><img src="images/3.jpg"  width="500px" height="200px" alt=""></li>
            <li><img src="images/4.jpg"  width="500px" height="200px" alt=""></li>
            <li><img src="images/5.jpg"  width="500px" height="200px" alt=""></li>
        </ul>
        <ol>

        </ol>




    </div>

    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>


</div>
<script src="common.js"> </script>
<script>
var box =my$("box");
var screen=box.children[0];
var imgWidth = screen.offsetWidth;
var ulObj = screen.children[0];

var list =ulObj.children;
var olObj = screen.children[1];

var arr=my$("arr")
var index=0;

for(var i=0 ;i<list.length;i++){
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = i+1;
    liObj.setAttribute("index",i);
    liObj.onmouseover = function (){
    for (var j=0;j<olObj.children.length;j++) {

        olObj.children[j].removeAttribute("class")

    }
        this.className = "current";
        index = this.getAttribute("index");
        animate(ulObj, -index * imgWidth);

    }
}

//设置ol中第一个li的背景颜色
olObj.children[0].className = "current";

//克隆ul中的第一个li, 追加到ul的最后
ulObj.appendChild(ulObj.children[0].cloneNode(true));

//2.自动播放
var timeId = setInterval(move, 2000);

//3.鼠标移入显示焦点左右的div, 并且清除定时器
box.onmouseover = function () {
    arr.style.display = "block";
    clearInterval(timeId);
}
//鼠标移出显示焦点左右的div, 并且开启定时器
box.onmouseout = function () {
    arr.style.display = "none";
    timeId = setInterval(move, 2000);
}

//4.点击右边按钮
my$("right").onclick = move;

//点击左边按钮
my$("left").onclick = function () {
    if( index == 0){
        index = 5;
        ulObj.style.left = -index*imgWidth +"px";
    }
    index--;
    animate(ulObj, -index*imgWidth);
    //先干掉所有小按钮的样式
    for(var i = 0 ; i < olObj.children.length; i++){
        olObj.children[i].removeAttribute("class")
    }
    //设置对应的按钮颜色
    olObj.children[index].className = "current";

}

//封装自动播放的函数
function move() {
    if(index == list.length -1){
        //瞬间跳转到第一张图
        ulObj.style.left = 0+"px";
        index = 0;

    }

    index++;
    animate(ulObj, -index * imgWidth);

    //判断按钮的背景颜色, 如果index = 最后一个值的时候, 瞬间设置设置第一个的按钮颜色
    if( index == list.length - 1){
        //设置第一个的按钮颜色
        olObj.children[0].className = "current";
        //清除最后一个按钮的颜色
        olObj.children[olObj.children.length -1].className = "";
    }else{
        //更改小按钮的样式
        for(var i = 0 ; i < olObj.children.length; i++){
            olObj.children[i].removeAttribute("class")
        }
        //设置对应的li的背景颜色
        olObj.children[index].className = "current";
    }


}

</script>
</body>
</html>

honkaiimpac

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="style
复制链接

扫一扫