原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。
原简单的滚动轮播代码
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
position: relative;
width: 830px;/*展示宽度 展示4个图+3个边框=830*/
height: 130px;
border: 10px solid rgb(15, 15, 15);
margin: 100px auto;
overflow: hidden;
}
.scroll ul{
position: absolute;
width: 5000px;/*ul能存下所有li的宽*/
height: 130px;
top: 0;
left: 0;
}
.scroll ul li{
float: left;
width: 200px;
height: 130px;
margin-right: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="scroll" class="scroll">
<ul id="munit">
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../BOM/shuzi/9.png" alt=""></li>
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../BOM/shuzi/9.png" alt=""></li>
</ul>
</div>
<script>
//获取元素
var scroll = document.getElementById("scroll");
var munit = document.getElementById("munit");
var li = munit.children;
// 进行滚动
var nowLeft = 0;
//要找到ul元素运动的折返点
var back = -1470;//图和边框是li的宽度，展示的有4张图，所以折返点就是1260
//定时器
var timer = setInterval(run,20);
// 鼠标移上scroll停止
scroll.onmouseover = function(){
clearInterval(timer);
}
// 移开轮播
scroll.onmouseout = function(){
timer = setInterval(run,20);
}
//运动函数
function run(){
nowLeft -= 2;
//判断是否走到了折返点，走到了，则瞬间切换到0位置
if(nowLeft <= back){
nowLeft = 0;
}
munit.style.left = nowLeft + "px";
}
</script>
</body>
</html>
在<div id="scroll">结构给ul新增的一个父级div，这样之后添加图片，后期通过获取ul宽度就可以了计算折算点
1、折返点计算需要通过Js自动计算
var back = -munit.offsetWidth;//元素左移，值为负数
2、自动生成另一组对应的图片结构 li
munit.innerHTML = munit.innerHTML + munit.innerHTML;//这样就会增加一组li标签，后期增加图片也会随之增加
修改部分代码，
css改写部分：
/*给ul新增的一个父级div，这样添加图片后期获取ul宽度 就可以了 */
.scroll .inner{
position: relative;
width: 5000px;
}
.scroll ul{
position: absolute;
height: 130px;
top: 0;
left: 0;
list-style: none;
body改写部分：
<body>
<div id="scroll" class="scroll">
<div class="inner">
<ul id="munit">
<li><img src="../BOM/shuzi/3.png" alt=""></li>
<li><img src="../BOM/shuzi/4.png" alt=""></li>
<li><img src="../BOM/shuzi/5.png" alt=""></li>
<li><img src="../BOM/shuzi/6.png" alt=""></li>
<li><img src="../BOM/shuzi/7.png" alt=""></li>
<li><img src="../BOM/shuzi/8.png" alt=""></li>
<li><img src="../BOM/shuzi/9.png" alt=""></li>
<li><img src="../BOM/shuzi/10.png" alt=""></li>
</ul>
</div>
</div>
JS改写部分：
<script>
//获取元素
var scroll = document.getElementById("scroll");
var munit = document.getElementById("munit");
//改写部分
//1 折返点计算需要通过Js自动计算
var back = -munit.offsetWidth;//元素左移，值为负数
//2 自动生成另一组对应的图片结构 li
munit.innerHTML = munit.innerHTML + munit.innerHTML;
// 进行滚动
var nowLeft = 0;
//定时器
var timer = setInterval(run,20);
// 鼠标移上scroll停止
scroll.onmouseover = function(){
clearInterval(timer);
}
// 移开轮播
scroll.onmouseout = function(){
timer = setInterval(run,20);
}
//运动函数
function run(){
nowLeft -= 1;
//判断是否走到了折返点，走到了，则瞬间切换到0位置
if(nowLeft <= back){
nowLeft = 0;
}
munit.style.left = nowLeft + "px";
}
</script>
</body>
</html>
这样的代码耦合性低，也适合任意个数的li、任意大小的图片的加入
以上就是原生Js 实现的简单无缝滚动轮播图的示例代码的详细内容，更多关于Js 实现的简单无缝滚动轮播图的资料请关注我们其它相关文章！
相关推荐
-
js实现移动端轮播图滑动切换
本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu
-
JavaScript仿京东轮播图效果
本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码,供大家参考,具体内容如下 做了一个仿京东的轮播图,当然没有人家官网的精美啦. 主要技术点: 每隔3秒自动切换图片: 鼠标移入图片自动暂停切换,鼠标移出则继续: 点击左右方向按钮手动切换图片: 鼠标移到灰色圆点,显示对应的图片,并加亮显示. HTML代码: <body> <h1>轮播图展示</h1> <div id="did"> <!-- 图片 --> &
-
JS原生实现轮播图的几种方法
轮播图 主要思想就是: 在大的容器里,装着一个很长的表,表是容器宽度的整数倍. 然后通过更改列表样式里的left属性来实现左右滑动. 本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释. 通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片. <body> <div id="container"> /*容器*/ <div id="wrap" style=
-
javascript实现滚轮轮播图片
本文实例为大家分享了javascript实现滚轮轮播图片的具体代码,供大家参考,具体内容如下 效果图如下,只能用滚轮移动到头部和尾部 思路: 根据需要展示的图片数量(view-count)与slide-container中存放的图片数量设置ul的长度,然后设置每个li的均等宽度. 每次滚轮滚动ul移动一个li的距离 HTML: <div class="slide-container" view-count="4"> <ul> <li&g
-
JavaScript Dom实现轮播图原理和实例
想要制作一个轮播图我们要先弄清楚他的原理,如何能让图片自右向左滑动? 让我们想一想生活中有没有类似的东西,比如电影胶片. 我们可以创建一个块作为投影区,创建一个列表作为底片并使其向左移动,达到轮播图效果. 创建一个块和列表 创建一个块作为总的容器和显示区域. <div id="out"> <ul id="imgList"> <li><img src="pto/many.jpg" ></li&g
-
js编写轮播图效果
本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html部分 <div id="box"> <ul> <li class="show"><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""><
-
基于JavaScript实现简单的轮播图
本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下 js轮播图实现思路 1.先获取元素 盒子 左右按钮 2.鼠标经过 显示/隐藏 左右侧按钮 3.动态生成小圆圈. 添加自定义属性 4.小圆圈点击事件 添加current类名 5.添加动画事件 animate 等于 -索引号*focusWidth 6.克隆第一张图片到最后面 7.添加右侧/左侧按钮点击事件 8.设置定时器 手动调用右侧按钮点击事件 html代码部分 <!DOCTYPE html> <
-
JavaScript实现循环轮播图
本文实例为大家分享了JavaScript实现循环轮播图的具体代码,供大家参考,具体内容如下 案例演示: 1.点击下面图标,图片进行轮播 2.图片轮播完,接着轮播到第一张 (代码内部具有详细解释) 项目结构图: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片轮播示例</title> <link rel="
-
原生Js 实现的简单无缝滚动轮播图的示例代码
简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码. 原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
-
JavaScript实现无缝轮播图的示例代码
目录 上效果 一.实现过程 1)首先实现基本布局 2)主要样式 二.如何实现无缝呢 (重点来了) 思路: 主要代码 完整代码 花费一个下午从0到1实现的轮播图,当然还有很多需要改进的地方(欢迎提出需要改进的地方),等我再努力努力,将其封装成一个组件. 上效果 一.实现过程 1)首先实现基本布局 <div class="carousel-container"> //图片列表 <div class="carousel-list"></div
-
用vue写一个仿简书的轮播图的示例代码
1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $
-
JS实现头条新闻的经典轮播图效果示例
本文实例讲述了JS实现头条新闻的经典轮播图效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m
-
Vue中如何实现轮播图的示例代码
这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
原生js和jQuery实现淡入淡出轮播效果
本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l
-
JS中Swiper的使用和轮播图效果
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs
-
js实现炫酷的左右轮播图
本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="style
-
简单实现AngularJS轮播图效果
本文实例为大家分享了AngularJS轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.baid