原生JS无缝滑动轮播图
本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,div,img{
margin: 0;
padding: 0;
list-style: none;
vertical-align: top;
}
#banner{
width: 400px;
height: 300px;
margin:50px auto;
position: relative;
overflow: hidden;
}
#banner ul{
width: 400px;
position: absolute;
}
#banner li img{
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 40px;
}
#dot{
height: 20px;
position: absolute;
left: calc(50% - 80px);
bottom: 20px;
}
#dot i{
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
float: left;
margin: 0 10px;
cursor: pointer;
}
#dot i.current{
background: rgb(161,1,34);
}
#pages{
height: 60px;
width:100%;
position: absolute;
top: calc(50% - 30px);
cursor: pointer;
}
#pages i{
width:30px;
height: 60px;
background: rgb(0,0,0);
font-size: 22px;
color: #fff;
text-align: center;
line-height: 60px;
opacity: 0.5;
font-style: normal;
position: absolute;
user-select: none;
}
#pages i.gt{
right:0;
top: 0;
font-size: 21px;
}
#pages i:hover{
opacity: 0.7;
}
</style>
</head>
<body>
<div id="banner">
<ul id="ul">
<li><img src="images2/imgs (1).jpg" alt=""></li>
<li><img src="images2/imgs (2).jpg" alt=""></li>
<li><img src="images2/imgs (3).jpg" alt=""></li>
<li><img src="images2/imgs (4).jpg" alt=""></li>
<li><img src="images2/imgs (5).jpg" alt=""></li>
<li><img src="images2/imgs (6).jpg" alt=""></li>
<li><img src="images2/imgs (7).jpg" alt=""></li>
<li><img src="images2/imgs (8).jpg" alt=""></li>
</ul>
<div id="dot">
</div>
<div id="pages">
<i class="lt">^</i>
<i class="gt">v</i>
</div>
</div>
<script src="tool.js"></script>
<script type="text/javascript">
var lis = $("li", $("#ul")),
liHeight = lis[0].offsetHeight,
len = lis.length;
c = 1; n = 2;
var first = lis[0].cloneNode(true),
last = lis[len - 1].cloneNode(true);
$("#ul").insertBefore(last, lis[0]);
$("#ul").appendChild(first);
var html = "";
for(var i = 0; i < len; i++)
html += "<i></i>";
len += 2;
$("#dot").innerHTML = html;
$("#ul").style.height = liHeight * len + "px";
$("#ul").style.top = -liHeight + "px";
var dots = $("i", $("#dot"));
dots[0].className = "current";
var tf = true;
function move(){
var _top = -n * liHeight;
animate($("#ul"), {top : _top}, 300, function(){
if(n >= len){
n = 2;
c = 1;
css($("#ul"), "top", -liHeight + "px");
}else if(n <= 1){
c = len - 2;
n = len - 1;
css($("#ul"), "top", c * -liHeight + "px");
}
});
var dotIndex = n - 1;
if(dotIndex === len - 2)
dotIndex = 0;
else if(dotIndex === -1)
dotIndex = len -3;
for(let i =0; i<dots.length; i ++)
dots[i].className = "";
dots[dotIndex].className = "current";
c = n;
n++;
}
var timer = setInterval(move, 3000);
$("#banner").onmouseover = function(){
clearInterval(timer);
}
$("#banner").onmouseout = function(){
timer = setInterval(move, 3000);
}
on($("#dot"), "mouseover", function(e){
e = e || event;
var src = e.target || e.srcElement;
if(src.nodeName === "I"){
var index = Array.from($("i", this)).indexOf(src);
n = index + 1;
move();
}
})
var timeout;
on($("#pages"), "click",function(e){
clearTimeout(timeout);
if(tf){
tf = false;
e = e || event;
var src = e.target || e.srcElement;
if(src.className === "gt"){
n = c - 1;
move();
}else if(src.className === "lt"){
move();
}
}
timeout = setTimeout(function(){
tf = true;
},400)
})
</script>
</body>
</html>
更多关于轮播图效果的专题，请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
-
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
-
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu