原生JavaScript轮播图实现方法

2024-08-06 21:22:09

本文实例为大家分享了JavaScript轮播图的实现方法，供大家参考，具体内容如下

效果截图：

注：div容器大小和图片路径可以自行设置,添加img和a标签后浏览器可以自适应.

创建image文件夹存放图片

写入html文本

<body>
//图片路径可以自己更改
   <div id="outer">
       <ul id="imglist">
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
       </ul>
       <div id="nav">
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
       </div>
   </div>
</body>

加入Css样式

<style>
* {
   margin: 0px;
   padding: 0px;
}

/* 外框容器 */
#outer {
   width: 1555px;
   height: 600px;
   background-color: #bfa;
   margin: 100px auto;
   position: relative;
   /* 隐藏 */
   overflow: hidden;

}

/* 图片列表 */
#imglist {
   /* 弹性盒布局 */
   display: flex;
   list-style: none;
   position: relative;
   /* 布局方向 */
   /* flex-direct5on: row; */
   /*一张图片像素移动`1552px*/
   /* right: 1552px; */

}

#imglist li {
   margin: 10px 10px;
}

/* 导航点 */
#nav {
   display: flex;
   list-style: none;
   position: absolute;
   bottom: 50px;
   /*  1555/2 - 6*(20+25)/2 */
   /* left: 642px; */

}

#nav a {
   width: 25px;
   height: 25px;
   margin: 0px 10px;
   background-color: rgb(223, 129, 52);
   border-radius: 5px;
}

/* 鼠标移动效果 */
#nav a:hover {
   background-color: rgb(215, 107, 224);
}
</style>

用JavaScript实现功能

<script type="text/javascript">
    window.onload = function () {

    // 获取外框属性
    var outer = document.getElementById("outer");
    // 获取imglist属性
    var imglist = document.getElementById("imglist");
    // 获取img属性
    var imgArr = document.getElementsByTagName("img");

    // 获取a属性
    var allA = document.getElementsByTagName('a');
    //获取导航点
    var nav = document.getElementById("nav");
    //设置导航点居中位置
    nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

    //默认显示索引
    var index = 0;
    allA[index].style.backgroundColor = "rgb(215, 107, 224)";
    // 切换导航点定时器
    var temer = setInterval(function () {
        //循环显示
        index = (++index) % allA.length;
        //设置导航点背景颜色
        allA[index].style.backgroundColor = "rgb(215, 107, 224)";
        SetA();
        //自动切换图片
        //修改图片,一张图片像素移动左移动1552px
        imglist.style.transition = "right 1.5s"
        imglist.style.right = (index * 1552) + "px";

    }, 1800);

    //单击超链接显示图片
    for (var i = 0; i < allA.length; i++) {
        //为每个超链接添加索引
        allA[i].index = i;
        //为每个超链接绑定单击响应函数
        allA[i].onclick = function () {

            imgIndex = this.index;
            //覆盖导航点当前的位置
            index = imgIndex;
            SetA();
            //修改图片,一张图片像素移动左移动1552px
            imglist.style.transition = "right .85s"
            imglist.style.right = (imgIndex * 1552) + "px";

            //修改选择的a标签
            allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
        };
    }
    //清除a的样式
    function SetA() {
        for (var i = 0; i < allA.length; i++) {
            allA[i].style.backgroundColor = "";
        }
        //给当前导航设定
        allA[index].style.backgroundColor = "rgb(215, 107, 224)";
    }
};

</script>

完整代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        /* 外框容器 */
        #outer {
            width: 1555px;
            height: 600px;
            background-color: #bfa;
            margin: 100px auto;
            position: relative;
            /* 隐藏 */
            overflow: hidden;

        }

        /* 图片列表 */
        #imglist {
            /* 弹性盒布局 */
            display: flex;
            list-style: none;
            position: relative;
            /* 布局方向 */
            /* flex-direct5on: row; */
            /*一张图片像素移动`1552px*/
            /* right: 1552px; */

        }

        #imglist li {
            margin: 10px 10px;
        }

        /* 导航点 */
        #nav {
            display: flex;
            list-style: none;
            position: absolute;
            bottom: 50px;
            /*  1555/2 - 6*(20+25)/2 */
            /* left: 642px; */

        }

        #nav a {
            width: 25px;
            height: 25px;
            margin: 0px 10px;
            background-color: rgb(223, 129, 52);
            border-radius: 5px;
        }

        /* 鼠标移动效果 */
        #nav a:hover {
            background-color: rgb(215, 107, 224);
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            // 获取外框属性
            var outer = document.getElementById("outer");
            // 获取imglist属性
            var imglist = document.getElementById("imglist");
            // 获取img属性
            var imgArr = document.getElementsByTagName("img");

            // 获取a属性
            var allA = document.getElementsByTagName('a');
            //获取导航点
            var nav = document.getElementById("nav");
            //设置导航点居中位置
            nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

            //默认显示索引
            var index = 0;
            allA[index].style.backgroundColor = "rgb(215, 107, 224)";
            // 切换导航点定时器
            var temer = setInterval(function () {
                index = (++index) % allA.length;
                //设置导航点背景颜色
                allA[index].style.backgroundColor = "rgb(215, 107, 224)";
                SetA();
                //自动切换图片
                //修改图片,一张图片像素移动左移动1552px
                imglist.style.transition = "right 1.5s"
                imglist.style.right = (index * 1552) + "px";

                //循环显示

            }, 1800);

            //单击超链接显示图片
            for (var i = 0; i < allA.length; i++) {

                //为每个超链接添加索引
                allA[i].index = i;
                //为每个超链接绑定单击响应函数
                allA[i].onclick = function () {

                    imgIndex = this.index;
                    //覆盖导航点当前的位置
                    index = imgIndex;
                    SetA();
                    //修改图片,一张图片像素移动左移动1552px
                    imglist.style.transition = "right .85s"
                    imglist.style.right = (imgIndex * 1552) + "px";

                    //修改选择的a标签
                    allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";

                };

            }
            //清除a的样式
            function SetA() {
                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }

                allA[index].style.backgroundColor = "rgb(215, 107, 224)";

            }

        };

    </script>
</head>

<body>

    <div id="outer">
        <ul id="imglist">
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
        </ul>
        <div id="nav">
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
        </div>
    </div>
</body>
</html>

函数使用：

创建定时器:

setInterval(function () {},30)

设置圆角边框:

border-radius: 5px;

offsetWidth 水平方向 width + 左右padding + 左右border
offsetHeight 垂直方向 height + 上下padding + 上下border

clientWidth 水平方向 width + 左右padding
clientHeight 垂直方向 height + 上下padding

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
JS实现左右无缝轮播图代码

废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
js实现从左向右滑动式轮播图效果

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
使用html+js+css 实现页面轮播图效果(实例讲解)

html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner">
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

原生JavaScript轮播图实现方法

效果截图：

完整代码

函数使用：

相关推荐

随机推荐