轮播图

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

weixin_44740410

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

阅读量71

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/88981567

版权

封装函数:

function animate(element,target) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        //获取元素当前位置
        var current=element.offsetLeft;
        //设置每一步移动多少像素
        var step=10;
        //判断往左还是往右走
        step=current<target?step:-step;
        //每移动一步,current的值会发生变化
        current+=step;
        //判断有没有到这个位置
        if (Math.abs(target-current)>Math.abs(step)){//current的值发生变化,设置当前元素的样式
            element.style.left=current+"px";

        } else{
            clearInterval(element,timeId);
            element.style.left=target+"px";
        }
    },20);

}

根据小圆点移动图片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        img {
            vertical-align: top
        }

        .box {
            width: 730px;
            height: 454px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .inner {
            width: 730px;
            height: 454px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }

        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .inner li {
            float: left;
        }
        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }

        .square span.current {
            background-color: orangered;
            color: #fff;
        }

    </style>

</head>
<body>
<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </div>
</div>


<script src="common.js"></script>
<script>
    //获取box
    var box=my$("box");
    //获取相框
    var inner=box.children[0];
    //获取相框宽度
    var imgWidth=inner.offsetWidth;
    //获取ul
    var ulObj=inner.children[0];
    //获取li
    var list=ulObj.children
    //获取所有的span标签
    var spanObjs=inner.children[1].children;
    //遍历所有的span标签,添加鼠标移入事件
    for (var i=0;i<spanObjs.length;i++){
        spanObjs[i].setAttribute("index",i);
        //给每一个span标签添加一个自定义属性,用于存储索引
        spanObjs[i].onmouseover=function () {
            //排他,两件事:把所有样式还原,当前元素样式突出
            for (var j=0;j<spanObjs.length;j++) {
                spanObjs[j].removeAttribute("class");
            }
            this.className="current";
            //获取当前元素的hhh属性
            var hhh=this.getAttribute("index");
            //移动的是ul,目标位置:每个图片的宽度*鼠标放上去的按钮索引
            //每个li对应下面每个span===索引是一样的
            animate(ulObj,-imgWidth*hhh);
        }
    }


    function animate(element,target) {
        var timeId=setInterval(function () {
            //获取元素当前位置
            var current=element.offsetLeft;
            //设置每一步移动多少像素
            var step=10;
            //判断往左还是往右走
            step=current>target?-step:step;
            //每移动一步,current的值会发生变化
            current+=step;
            //判断有没有到这个位置
            if (Math.abs(target-current)>=Math.abs(step)){//current的值发生变化,设置当前元素的样式
                element.style.left=current+"px";

            } else{
                element.style.left=target+"px";
                clearInterval(timeId);
            }
        },20);

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

左右焦点轮播:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, ul, ol, li, img {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 520px;
            height: 280px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
        }

        .ad {
            width: 520px;
            height: 280px;
            /*overflow: hidden;*/
            position: relative;
        }

        #box img {
            width: 520px;
        }

        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .ad ol li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            background: #fff;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            _display: inline;
        }

        .ad ol li.current {
            background: yellow;
        }

        .ad ul li {
            float: left;
        }

        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }

        .ad ul li.current {
            display: block;
        }

        #focusD {
            display: none;
        }

        #focusD span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #focusD #right {
            right: 5px;
            left: auto;
        }
    </style>

</head>
<body>
<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/01.jpg"/></li>
            <li><img src="images/02.jpg"/></li>
            <li><img src="images/03.jpg"/></li>
            <li><img src="images/04.jpg"/></li>
            <li><img src="images/05.jpg"/></li>
        </ul>
    </div><!--相框-->
    <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
</div>
<script src="common.js"></script>
<script>
    var  box=my$("box");
    var ad=box.children[0];
    var imgWidth=ad.offsetWidth;
    var ulObj=ad.children[0];
    var focusD=my$("focusD");
    box.onmouseover=function () {
        focusD.style.display="block";
    }
    box.onmouseout=function () {
        focusD.style.display="";
    }


    var index=0;//全局变量
//点击右边焦点
    my$("right").onclick=function () {
        if (index<ulObj.children.length-1){
            index++;
            animate(ulObj,-index*imgWidth);
        }

    }
    //点击左边焦点
    my$("left").onclick=function () {
        if (index>0) {
            index--;
            animate(ulObj,-index*imgWidth);
        }

    }
    function animate(element,target) {
        clearInterval(element.timeId);
      element.timeId=setInterval(function () {
            //获取元素当前位置
            var current=element.offsetLeft;
            //设置每一步移动多少像素
            var step=10;
            //判断往左还是往右走
            step=current<target?step:-step;
            //每移动一步,current的值会发生变化
            current+=step;
            //判断有没有到这个位置
            if (Math.abs(target-current)>Math.abs(step)){//current的值发生变化,设置当前元素的样式
                element.style.left=current+"px";

            } else{
                clearInterval(element,timeId);
                element.style.left=target+"px";
            }
        },20);

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

无缝轮播:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;

        }

        img {
            vertical-align: top;
        }

        /*取消图片底部3像素距离*/
        .box {
            width: 300px;
            height: 170px;
            margin: 100px auto;
            background-color: pink;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }

        .box ul li {
            float: left;
        }
        #screen img{
            width: 300px;
        }

        .box ul {
            width: 1500px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box" id="screen">
    <ul>
        <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>
        <li><img src="images/01.jpg" alt=""/></li>
    </ul>
</div>
<script src="common.js"></script>
<script>
    var screen=my$("screen");
    var ulObj=screen.children[0];
    var current=0;
    function f1() {
        current-=10;
        if (current<-300*4) {
            current=0;
        }
        ulObj.style.left=current+"px";
    }
    var timeId=setInterval(f1,20);
    screen.onmouseover=function () {
        clearInterval(timeId)
    }
    screen.onmouseout=function () {
        timeId=setInterval(f1,20);
    }
</script>
</body>
</html>

完整轮播:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: #DB192A;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>

</head>
<body>
<div class="all" id='box'>
    <div class="screen"><!--相框-->
        <ul>
            <li>
                <img src="images/1.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/2.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/3.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/4.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/5.jpg" width="500" height="200"/>
            </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>
    //1.获取所有的元素
    //获取大盒子
    var box=my$("box");
    //获取相框
    var screen=box.children[0];
    //获取相框的宽度
    var imgWidth=screen.offsetWidth;
    //获取ul
    var ulObj=screen.children[0];
    //获取所有的li
    var list=ulObj.children;
    //获取ol
    var olObj=screen.children[1];
    //获取左右焦点 的 div
    var arr=my$("arr");
    var hhh=0;
    //根据li的个数创建小按钮
    for (var i=0;i<list.length;i++){
        //创建li,追加到ol中
        var liObj=document.createElement("li");
        olObj.appendChild(liObj);
        //给ol添加文本
        liObj.innerHTML=i+1;
        //给ol中的每个li添加自定义属性
        liObj.setAttribute("index",i);
        //给ol中的每个li添加鼠标移入事件
        liObj.onmouseover=function () {
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            //鼠标移入到那个li,那ul移动对应的 距离,轮播实现
            //获取当前移入的li的索引
            hhh=this.getAttribute("index");
            animate(ulObj,-hhh*imgWidth);
        }
    }
    //手动设置ol中第一个li的背景颜色
    olObj.firstElementChild.className="current";
    //克隆ul中的第一个li,追加到ul中
    ulObj.appendChild(list[0].cloneNode(true));
    //自动播放
    var timeId=setInterval(clickHandle,2000);
    //鼠标移入移出事件.显示隐藏arr
    //鼠标移入
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
    }

    //鼠标移出
    box.onmouseout=function () {
        arr.style.display="none";
        //开启定时器
        timeId=setInterval(clickHandle,2000);
    }
//点击右边按钮
    my$("right").onclick=clickHandle;
    function clickHandle() {
        if (hhh==list.length-1){
            //从第6张图跳到第一张图
            hhh=0;
            ulObj.style.left="0px";//把ul位置还原
        }
        //索引++,移动ul,完成轮播
        hhh++;
        animate(ulObj,-hhh*imgWidth);
        //设置小圆点同步
        if (hhh==list.length-1){
            olObj.children[0].className="current";
            olObj.children[olObj.children.length-1].removeAttribute("class");
        } else{
            //排他
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            olObj.children[hhh].className="current";
        }
    }
    //点击左边按钮
    my$("left").onclick=function () {
        if (hhh==0){
            hhh=list.length-1;
            ulObj.style.left=-hhh*imgWidth+"px";
        }
        //hhh--,移动ul,完成轮播
        hhh--;
        animate(ulObj,-hhh*imgWidth);
        //设置小圆点样式同步
        //排他
        for (var j=0;j<olObj.children.length;j++){
            olObj.children[j].removeAttribute("class");
        }
        olObj.children[hhh].className="current";
    }
</script>
</body>
</html>

weixin_44740410

关注

0
点赞
踩
0

收藏

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

封装函数:function animate(element,target) { clearInterval(element.timeId); element.timeId=setInterval(function () { //获取元素当前位置 var current=element.offsetLeft; //设置每一步移动多...
复制链接

扫一扫

轮播图

“相关推荐”对你有帮助么？