zoukankan      html  css  js  c++  java
  • 使用元素JS制作简单的轮播特效,定时器设置自动轮播

    使用原生JavaScript制作一个简答的图片轮播效果,没有实现动画。原理很简单,只需要使用DOM对象操作节点的添加和删除即可实现轮播功能,看一下效果图:

    下面开始上代码:
    HTML代码

    <!-- .swiper是轮播的外部容器
    			 .swiper-item是轮播的每个元素,在该标签中放置图片
    		 -->
    <div id="swiper">
    	<div class="swiper-item">
    		<img src="img/01.jpg">
    	</div>
    	<div class="swiper-item">
    		<img src="img/02.jpg">
    	</div>
    	<div class="swiper-item">
    		<img src="img/03.jpg">
    	</div>
    	<div class="swiper-item">
    		<img src="img/04.jpg">
    	</div>
    </div>
    
    <!-- 分页指示器 -->
    <div id="point">
    	<div class="point-item point-active"></div>
    	<div class="point-item"></div>
    	<div class="point-item"></div>
    	<div class="point-item"></div>
    </div>
    
    <!-- 控制轮播的按钮 -->
    <div style="text-align: center;">
    	<button id="up">上一张</button>
    	<button id="down">下一张</button>
    </div>
    
    

    CSS代码:

    /* 轮播外部容器样式 */
    #swiper {
    	margin: 10px auto;
    	 360px;
    	height: 200px;
    	border: 1px solid #999;
    	overflow: hidden; /* 注释本行代码,查看图片的轮播效果 */
    }
    
    /* 设置轮播图片样式 */
    .swiper-item img {
    	 100%;
    }
    
    /* 分页指示器样式 */
    #point {
    	 80px;
    	height: 15px;
    	margin: 10px auto;
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: space-around;
    }
    
    .point-item {
    	border: 1px solid #999;
    	 10px;
    	height: 10px;
    	border-radius: 50%;
    }
    
    /* 指示器激活样式 */
    .point-active {
    	background-color: red;
    }
    
    

    JavaScript代码:

    //获取轮播容器对象 和 分页指示器元素对象
    var swiper = document.getElementById('swiper');
    var point = document.getElementById('point');
    
    
    //播放下一张图片的方法
    function changeAfter() {
    	//1. 删除轮播容器中第一个子元素,并返回被删除的元素对象
    	//swiper.children 返回swiper元素下的所有子元素
    	var child = swiper.removeChild(swiper.children[0]);
    	//2. 将被删除元素追加到轮播容器的末尾
    	swiper.appendChild(child);
    
    	//设置分页指示器的轮播效果,要与图片轮播顺序相反
    	var index = point.children.length - 1;
    	var pointItem = point.removeChild(point.children[index]);
    	point.insertBefore(pointItem, point.children[0]);
    
    }
    
    //播放上一张图片的方法
    function changeBefore() {
    	//1. 获取最后一张在轮播容器中的的下标
    	var index = swiper.children.length - 1;
    	//2. 把最后一张删除,并返回被删除的元素对象
    	var child = swiper.removeChild(swiper.children[index]);
    	//3. 将被删除元素添加到第一张之前
    	swiper.insertBefore(child, swiper.children[0]);
    
    	//设置分页指示器的轮播效果,要与图片轮播顺序相反
    	var pointItem = point.removeChild(point.children[0]);
    	point.appendChild(pointItem);
    }
    
    //上一张按钮点击事件
    document.getElementById("up").onclick = function() {
    	changeBefore(); //调用轮播上一张的方法
    }
    //下一张按钮点击事件
    document.getElementById("down").onclick = function() {
    	changeAfter(); //调用轮播下一张的方法
    }
    
    //定时轮播
    setInterval('changeAfter()', 3000);
    
    
  • 相关阅读:
    angular基础
    函数&闭包
    springboot + 拦截器 + 注解 实现自定义权限验证
    idea点击RUN启动报错: Broken configuration due to unavailable plugin or invalid configuration dat
    解决“指定的服务已经标记为删除”问题
    Mybatis中的XML中需要用到的转义符号整理
    springboot 2.0+ 自定义拦截器
    idea中lombok的使用
    springboot集成PageHelper,支持springboot2.0以上版本
    IDEA 修改JSP和后端数据后,页面刷新可以实时更新
  • 原文地址:https://www.cnblogs.com/jpwz/p/12872534.html
Copyright © 2011-2022 走看看