使用JavaScript创建轮播图

最新推荐文章于 2024-07-14 12:56:18 发布

Elinkers

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量376

点赞数

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/Echianer/article/details/109173765

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用js创建轮播图

一、轮播图功能
二、实现方法
三、完整代码
总结

一、轮播图功能

1.自动轮播功能

鼠标在目标范围外开始自动轮播，当鼠标移动进入目标时停止轮播

2.拖拽功能

根据鼠标的拖拽能够切换图片的页面

3.小按钮功能

通过鼠标点击小按钮直接切换到当前目标图片

二、实现方法

1.html创建

html应该是三层的div
一层最外层放置外框，是整个轮播图
二层是图片的长框，长框的长度应该是几个图片累加起来的长度
三层是每张图片

2.css创建

注意
1.第一层和第三层的长宽是一样的，第二层的长是第三层的长*图片数量
2.第一层设置overflow：hidden样式，使第二层超出图片范围的部分隐藏

3.js触发事件

通过设置图片的left，每次自动轮播或者手动轮播时，图片通过改变css的left属性进行图片的切换

三、完整代码

代码如下：

<html>
    <head>
        <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }

        .block{
            overflow: hidden;
            position: relative;
            width: 400px;
            height: 200px;
            margin: 300px;
        }

        .diagram{
            position: absolute;
            width: 1200px;
            height: 200px;
            transition:  1s;
        }

        .picture{
            width: 400px;
            height: 200px;
            float: left;
        }

        .spot_list{
            right:30px;
            bottom: 10px;
            position: absolute;
        }

        .spot{
            width: 20px;
            height: 20px;
            margin-left: 10px;
            background-color: aliceblue;
            float:left;
            cursor: pointer;
        }

        .conner{
            width: 400px;
            height: 20px;
            position: absolute;
            bottom: 100px;
        }
        
        .con_left{
            background-color: aliceblue;
            float: left;
            cursor: pointer;
        }

        .con_right{
            background-color: aliceblue;
            float: right;
            cursor: pointer;
        }

        </style>
    </head>
    <body>

        <div class="block">
            <div class="diagram">
                <div class="picture">
                    <img src="test1.jpg" style="width:400px;height:200px" ondragstart="return false">
                </div>
                <div class="picture">
                    <img src="test2.jpg" style="width:400px;height:200px" ondragstart="return false">
                </div>
                <div class="picture">
                    <img src="test3.jpg" style="width:400px;height:200px" ondragstart="return false">
                </div>
            </div>

            <div class="spot_list">
                <div class="spot" onclick="pictureLeft(0)" >1</div>
                <div class="spot" onclick="pictureLeft(1)" >2</div>
                <div class="spot" onclick="pictureLeft(2)" >3</div>
            </div>

            <div class="conner">
                <div class="con_left"> < </div>
                <div class="con_right"> > </div>
            </div>
        </div>

        <script type="text/javascript">

            var diagram = document.getElementsByClassName("diagram")[0],
                block = document.getElementsByClassName("block")[0],
                con_left = document.getElementsByClassName("con_left")[0],
                con_right = document.getElementsByClassName("con_right")[0],
                spot = document.getElementsByClassName("spot"),

                index=0,
                turn = new Array("0px","-400px","-800px"),
                timer;

            var _left = 0;

            diagram.style.left="0px";

            //0.0检测图片的位置
            const numbercheck = ()=>{
                if(diagram.style.left==turn[0]) index=0;
                else if(diagram.style.left==turn[1]) index=1;
                else if(diagram.style.left==turn[2]) index=2;
            }

            //0.5自由移动 时间+动态函数
            const move=()=>{
                timer = setInterval(change,2000);
            }

            const change=()=>{
                if(index!=2){
                    diagram.style.left=turn[index+1];
                    index++;
                }
                else{
                    index=-1;
                    diagram.style.left=turn[index+1];
                    index++;
                }                    
            }            

            //1.0拖拽图片+自由移动触发
            block.onmousedown=(event)=>{
                slabel=event.offsetX;
                s_label=event.clientX;

                block.onmousemove=(event)=>{
                    diagram.style.transition="0s";
                    elabel=event.offsetX;

                    _left= parseInt(diagram.style.left) + elabel-slabel;
                    diagram.style.left = _left+"px" ;

                }

                block.onmouseup=(event)=>{
                    e_label=event.clientX;
                    block.onmousemove=null;
                    diagram.style.transition="1s";
                //1.5弹回设置已经超过区域翻页
                //起-初<0向左拉，判断是否往右一张
                    if (e_label-s_label<=-200) {
                        if(index == 2) {
                            index = -1;
                        }
                        index++;
                    }
                //起-初>0向右拉，判断是否往左一张
                    else if (e_label-s_label>=200) {
                        if(index == 0){
                            index = 3;
                        }
                        index--;
                    }
                    diagram.style.left=turn[index];
                }
            }

            block.onmouseover=()=>{
                clearInterval(timer);
            }

            block.onmouseout=()=>{
                block.onmousemove=null;
                diagram.style.left=turn[index];
                diagram.style.transition="1s";
                move();
            }
            move();

            //2.0小按钮实现
            con_left.onclick = () =>{
                if(index!=0){
                    index=index-1;
                    diagram.style.left=turn[index];
                }
                else if(index==0){
                    index=2;
                    diagram.style.left="-800px";
                }
                numbercheck();
            }
                                
            con_right.onclick = () =>{
                if(index!=2){
                    index=index+1;
                    diagram.style.left=turn[index];
                }
                else if(index==2){
                    index=0;
                    diagram.style.left="0px";
                }
                numbercheck();
            }

            const pictureLeft = (i) => {
                diagram.style.left = -(i * 400) + "px";
                numbercheck();
            }

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

总结

一个简单的轮播图制作

Elinkers

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用JavaScript创建轮播图

使用js创建轮播图一、轮播图功能1.自动轮播功能2.拖拽功能3.小按钮功能二、实现方法1.html创建2.css创建3.js触发事件三、完整代码总结一、轮播图功能1.自动轮播功能鼠标在目标范围外开始自动轮播，当鼠标移动进入目标时停止轮播2.拖拽功能根据鼠标的拖拽能够切换图片的页面3.小按钮功能通过鼠标点击小按钮直接切换到当前目标图片二、实现方法1.html创建html应该是三层的div一层最外层放置外框，是整个轮播图二层是图片的长框，长框的长度应该是几个图片累加起来的长度三层是每张
复制链接

扫一扫