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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
理解javascript封装
Feb 23 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 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
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python opencv之SURF算法示例
2018/02/24 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
老师给学生的表扬信
2014/01/17 职场文书
教师专业自荐书范文
2014/02/10 职场文书
承诺书怎么写
2014/03/26 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
2014年德育工作总结
2014/11/20 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
Python函数对象与闭包函数
2022/04/13 Python