原生DOM方法实现,多个图片的横向左右轮播

轮播页面的构成:

页面中间有多个同样大小的图片,在图片群的左右两侧有左右方向播动的可点击钮,图片群就会往左侧翻转,并且在最后一张图片的时候,第一张图片就会继续出现在最后一张图片,属于无裂痕翻转

右侧按钮也是同样。

实现逻辑:

左侧按钮,通过获取图片所在上一级(父级)目录,对出现在最左侧的第一个child用removeChild()方法删除第一个,然后将删除的该子元素添加到父级元素的最后,每次点击事件就会重复前面操作。

实现效果:

(初始化图):

(点击左侧按钮):

为了使一个界面只出现所需要的某几张图片,可以对父容器使用overflow:hidden

如图:

(向右点击一次):

代码如下:

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

            ul {
                /*position: absolute;*/
                /*left: -20px;*/
                list-style: none;
                margin: 50px auto;
                display: inline-block;
                margin-left: -400px;
                width: 1800px;
            }

            ul li {
                display: inline-block;
                float: left;
                width: 200px;
                /*height: 200px;*/
                margin-right: 20px;
            }
            ul li img{
                width: 100%;
            }
            .wrapper {
                width: 880px;
                height: 880px;
                margin: 50px auto;
                background-color: azure;
                border: 1px gainsboro dotted;
                overflow: hidden;
            }

            .btn01 {
                float: left;
                margin-left: 30px;
                margin-top: 70px;
            }

            .btn02 {
                float: right;
                margin-right: 30px;
                margin-top: 70px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul id="sliderBox">
                    <li><a href="#"><img src="images/1.jpg" ></a></li>
                    <li><a href="#"><img src="images/2.jpg" ></a></li>
                    <li><a href="#"><img src="images/3.jpg" ></a></li>
                    <li><a href="#"><img src="images/4.jpg" ></a></li>
                    <li><a href="#"><img src="images/5.jpg" ></a></li>
                    <li><a href="#"><img src="images/6.jpg" ></a></li>
                    <li><a href="#"><img src="images/7.jpg" ></a></li>
                    <li><a href="#"><img src="images/8.jpg" ></a></li>
            </ul>
            <div class="btn01" onclick="leftArrow()"><img src="images/左箭头.png"/></div>
            <div class="btn02" onclick="rightArrow()"><img src="images/右箭头.png"></div>
        </div>
    </body>
    <script>
        function leftArrow() {
            var parent = document.getElementById("sliderBox");
            var children = parent.getElementsByTagName("li");
            var firstChild = children[0];
            var tmp = firstChild;
            parent.removeChild(firstChild);
            parent.appendChild(tmp);
        }
        function rightArrow() {
            var parent = document.getElementById("sliderBox");
            var children = parent.getElementsByTagName("li");
            var lastChild = children[children.length-1];
            var tmp = lastChild;
            parent.removeChild(lastChild);
            parent.insertBefore(tmp,children[0]);
        }
    </script>

原文地址:https://www.cnblogs.com/Ky-Thompson23/p/11956079.html

时间: 2024-10-13 11:10:09

原生DOM方法实现,多个图片的横向左右轮播的相关文章

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

图片切换(非轮播,淡入淡出)--变形金刚joy007 项目总结

图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css"> div{ position: absolute; left: 0px; top: 0px;} .div1{ width: 800px; hei

实现图片点击左右轮播

这个 相当于一个小框架,拿来就可以用: 1. 功能: 如上图显示: 点击左右两个button,可以实现图片向左右滚动,也可以设置在多少秒自己滚动. 2. 首先建立一个js文件,文件名为play.js(只要和HTML中的引入相同就可以了): 1 var sina = { 2 $: function(objName) { 3 if (document.getElementById) { 4 return eval('document.getElementById("' + objName + '&q

js原生dom方法总结

1.document document方法getElementById (Node)返回指定节点的引用getElementsByTagName (NodeList)返回文档中所有匹配元素的集合querySelector (Node)返回与选择器匹配的首个节点 (ie8+)querySelectorAll (Node)返回与选择器匹配的所有节点 (ie8+),其中ie8中选择器只支持css2选择器createElement(name) (Node)返回新建的节点createTextNode(tex

SDWebimage加载图片,循环滚动轮播图和pagecontrol

#define KIMGCOUNT 4

原生JavaScript实现无缝轮播图

无缝轮播图是页面常用的特效之一,然而在实际的开发过程中,大部分的开发者都会使用插件来对轮播图进行开发,那么它的底层到底是怎么实现的呢,本文章将围绕这一问题展开探讨. 在讨论如何利用原生JS实现图片之间无缝切换轮播的动画效果之前,我们先来谈谈无缝轮播图片的css布局. 首先我们需要一个用来显示图片的DIV容器,然后把想要轮播的图片没有缝隙的排成一行放入DIV容器中,给DIV容器设置 overflow: hidden,这样在页面中就可以只看到一张图片,然后通过利用JS来移动ul的left值就能达到无

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须

bootstrap中的动态加载出来的图片轮播中的li标签中的class=&quot;active&quot;的动态添加移除

//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel ol li").toggleClass("active");//重复切换类名“active” }); 遇到的问题:在动态加载出来的轮播中设置了加载时就开始轮播data-ride="carousel"图片可以轮播但是底下的li标签的class没有进行切换.而不加d

js实现图片轮播图(一)

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总