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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
javascript白色简洁计算器
May 04 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
Vue实现菜单切换功能
Nov 08 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
php实例分享之mysql数据备份
2014/05/19 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue-swiper的使用教程
2018/08/30 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python识别验证码图片实例详解
2020/02/17 Python
详解pandas映射与数据转换
2021/01/22 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
模具数控专业自荐信
2014/01/27 职场文书
2015年大学生工作总结
2015/04/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
高一地理教学工作总结
2015/08/12 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android