JS轮播图的实现方法2


Posted in Javascript onAugust 25, 2020

本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下

需求:

自动轮播,鼠标移入轮播停止、移出继续,小圆点点击切图,左右箭头切图

效果图:

![轮播图]

JS轮播图的实现方法2

思路:

JS轮播图的实现方法2

将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。

HTML部分:

<div id="banner">
 <div class="w">
<!-- 左右箭头-->
 <span class="iconfont icon-zuojiantou"></span>
 <span class="iconfont icon-youjiantou"></span>
<!-- 轮播图-->
 <ul >
 <li><img src="img/1.jpg" alt=""></li>
 <li><img src="img/2.jpg" alt=""></li>
 <li><img src="img/3.jpg" alt=""></li>
 </ul>
<!-- /小圆点-->
 <ol id="circleContainer">

 </ol>
 </div>
</div>

CSS部分:

<style>
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .w {
 width: 1000px;
 height: 600px;
 margin: 100px auto 0;
 position: relative;
 overflow: hidden;
 }
 ul {
 width: 1000%;
 transition: all .5s ease-in-out;
 }
 ul li {
 float: left;
 width: 1000px;
 }
 ul li img {
 width: 100%;
 height: 600px;
 }
 .iconfont {
 color: white;
 position: absolute;
 font-size: 30px;
 top: calc(50% - 15px);
 background-color: rgba(216, 216, 216, 0.23);
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 cursor: pointer;
 }
 .iconfont:hover {
 color: palegreen;
 }
 .icon-zuojiantou {
 left: 0;
 }
 .icon-youjiantou {
 right: 0;
 }
 #circleContainer {
 position: absolute;
 bottom: 10px;
 left: calc(50% - 30px);
 }
 #circleContainer li {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: white;
 margin-right: 5px;
 }
 #circleContainer .change {
 background-color: palegreen;
 }
</style>

JS部分:

<script>
 let timer = setInterval(function () {
 arrow_r.onclick();
 },2000);
 let w = document.querySelector(".w");
 w.addEventListener("mouseenter",function () {
 clearInterval(timer);
 });
 w.addEventListener("mouseleave",function () {
 clearInterval(timer);
 timer = setInterval(function () {
 arrow_r.onclick();
 },2000);
 });
 //获取元素
 let ul = document.querySelector("ul");
 let ol = document.querySelector("#circleContainer");
 let arrow_r = document.querySelector(".icon-youjiantou");
 let arrow_l = document.querySelector(".icon-zuojiantou");
 let ImgWidth = ul.children[0].offsetWidth;
 let location_i = 0 ;
 // 创建小圆点 动态生成小圆点,图片增加时小圆点也随之增加
 for (let i = 0; i<ul.children.length;i++){
 let li = document.createElement("li");
 li.setAttribute("index",i);
 li.addEventListener("click",function () {
 let index = this.getAttribute("index");
 move(ul,index);
 location_i = index ;
 });
 ol.appendChild(li);
 }

 let liclone = ul.children[0].cloneNode(true);
 ul.appendChild(liclone);
 // 轮播函数
 function move(targetObj,n) {
 if (n === targetObj.children.length ) {
 targetObj.style.marginLeft = "0px";
 n = 0;
 }
 targetObj.style.marginLeft = -n * ImgWidth +"px";
 for (let i =0 ;i<ol.children.length;i++){
 ol.children[i].className = "";
 }
 n === 3 ? ol.children[0].className = "change": ol.children[n].className = "change";

 }
 ol.children[0].className = "change";
 // 右箭头点击
 arrow_r.onclick = function () {
 if (location_i === 3) {
 location_i = 0 ;
 ul.style.marginLeft = "0px" ;
 }
 location_i++;
 move(ul,location_i);

 };
 // 左箭头点击
 arrow_l.addEventListener("click",function () {
 if (location_i == 0) {
 location_i = ul.children.length -1 ;
 }
 location_i--;
 move(ul,location_i);
 })
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
JS轮播图的实现方法
Aug 24 #Javascript
js 函数性能比较方法
Aug 24 #Javascript
JavaScript实现简单验证码
Aug 24 #Javascript
JavaScript经典案例之简易计算器
Aug 24 #Javascript
原生js实现拖拽移动与缩放效果
Aug 24 #Javascript
JavaScript实现拖拽和缩放效果
Aug 24 #Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
You might like
构建简单的Webmail系统
2006/10/09 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php生成HTML文件的类方法
2019/10/11 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
对Python实现累加函数的方法详解
2019/01/23 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
自我评价如何写好?
2014/01/05 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
诚信考试承诺书
2014/03/27 职场文书
安全月活动总结
2014/05/05 职场文书
导师推荐信范文
2014/05/09 职场文书
开展警示教育活动总结
2015/05/09 职场文书
2015年科普工作总结
2015/07/23 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang