jq 实现无缝轮播图

工作中经常会用到轮播图，这里记载两种轮播图，供大家参考

一、自动播放的无缝轮播图（一张图片占满屏）

首先是HTML，

<div class='bannerCon'><ul class="bannerContainer" id="bannerContainer"><li class="banner"><img src="../imgs/banner1.png" alt=""></li><li class="banner"><img src="../imgs/banner2.png" alt=""></li><li class="banner"><img src="../imgs/banner3.png" alt=""></li><li class="banner"><img src="../imgs/banner4.png" alt=""></li><li class="banner"><img src="../imgs/banner5.png" alt="" ></li></ul><div class="bannerTip"><ul class="bannerUL" id="bannerTip"></ul></div>
</div>

下面是样式表：

.bannerCon{overflow:hidden;width:100%;position:relative;
}
.bannerContainer{position:relative;
}
.bannerContainer li{float:left;
}
.bannerContainer li img{width:100%;
}
.bannerTip{position:absolute;top:600px;left:0;width:100%;z-index: 1;
}
.bannerTip .bannerUL{margin:0 auto;width:100%;text-align: center;
}
.bannerTip .bannerUL li{/*float:left;*/display: inline-block;margin-right:20px;border-radius:50%;width:16px;height:16px;background-color:rgba(0,0,0,0.3);
}
.bannerTip .bannerUL li.activeLi{width:52px;border-radius: 8px;background-color:#fff;
}

下面是js部分，也是核心，注解写的很详细了，应该没什么问题了

$(function () {let windowWidth=document.body.clientWidth;//获取屏幕宽度let childNum=$('#bannerContainer').children('li').length;//获取子节点个数let listWidth=windowWidth*childNum; $("#bannerContainer li").css('width',windowWidth);//设置li的宽$("#bannerContainer").css('width',listWidth);//设置ul的宽
//根据图片张数创建小图标 for(let  x = 1;x <= childNum;x++){$("#bannerTip").append("<li>"+x+"</li>");$("#bannerTip li").first().addClass("active")}// 获取第一张图片的节点对象let firstImg = $('#bannerContainer li').first().clone();childNum=childNum+1;
// 添加到最后的位置 并设置 ul 的宽度$('#bannerContainer').append(firstImg).width(childNum * windowWidth);let i = 0;let timer;// 移动图片function moveImg() {// 最后一张if (i === childNum) {$('#bannerContainer').css({left: 0});i = 1;// console.log('最后一张')// console.log(i)}// 移动图片动画$('#bannerContainer').stop().animate({left: i * -windowWidth}, 1000);// // 换一下每个图片的小标记if (i === (childNum - 1)) {$('#bannerTip li').eq(0).addClass('active').siblings().removeClass('active');} else {$('#bannerTip li').eq(i).addClass('active').siblings().removeClass('active');}}// 点击小标记，跳转到指定的图片$('#bannerTip li').click(function() {i = $(this).index();moveImg();});//自动播放function autoPlay() {timer = setInterval(function() {i++;moveImg();}, 3000);}autoPlay();// 鼠标移入幻灯片清除定时器$('#bannerContainer').mouseover(function() {clearInterval(timer)}).mouseout(function() {// 鼠标离开重新播放autoPlay();})});

好了，到这轮播图就完成了

二、手动切换的无缝轮播图（屏幕同时显示几张图片）

首先是html部分

<img src='../imgs/left.png' class='toLeft' id='toLeft'>
<div class='bannerCon'><ul class="bannerContainer" id="bannerContainer"><li class="banner"><img src="../imgs/banner1.png" alt=""></li><li class="banner"><img src="../imgs/banner2.png" alt=""></li><li class="banner"><img src="../imgs/banner3.png" alt=""></li><li class="banner"><img src="../imgs/banner4.png" alt=""></li><li class="banner"><img src="../imgs/banner5.png" alt="" ></li></ul>
</div>
<img src='../imgs/right.png' class='toRight' id='toRight'>

下面是样式表

.bannerCon{float:left;width:900px;overflow:hidden;
}
.bannerContainer{position:retive;margin:0 auto;
}
.bannerContainer li{float:left;width:290px;height:290px;margin-right:10px;
}
.bannerContainer li img{width:100%;height:100%;
}
.toLeft{float:left;margin-right:20px;margin-top:150px;
}
.toRight{float:left;margin-left:20px;margin-top:150px;
}

接下来就是js部分，也是核心部分

$(function () {let imgWidth=300;//图片宽度let imgNum=$('#smallBanner').children('li').length;//图片总数// 复制所有图片节点对象let colneImage = $('#smallBanner li').clone();listNum=listNum*2;
// 添加到最后的位置 并设置 ul 的宽度$('#bannerContainer').append(colneImage).css('width',imgNum*imgWidth);let n = 0;// 向左$('#toLeft').click(function() {moveImage(++n);});
// 向右$('#toRight').click(function() {moveImage(--n);});// 移动图片function moveImage() {// 最后一张if (n === imgNum/2+1) {$('#bannerContainer').css({left: 0})n = 1;// console.log('最后一张')// console.log(i)}// 是第一张的时候if (n === -1) {n = imgNum/2 -1;$('#bannerContainer').css({left: (imgNum/2 ) * -imgWidth});}// 移动图片动画$('#bannerContainer').stop().animate({left: n * -imgWidth}, 1000);}});

到这也就完成了手动切换的无缝轮播图

当然也可以把手动切换和自动播放放一起，只要稍微修改一下就可以了。这两种方式是直接写到页面上的，不是插件，如果需要插件，可以自己封装一下。

jq 实现无缝轮播图相关推荐

jq实现无缝轮播图发现的问题
今天再用jq实现一个无缝衔接的轮播图时发现了一个问题,代码如下: 这是我轮播图中下按钮的点击事件,在判断最后一张图片将translate设置为0的时候,发现并没有出现无缝衔接的效果,而是出现了一个倒退 ...
jquery实现动态左右无缝轮播图
JQ代码实现动态无缝轮播图功能相比之下运用jquery比js原生代码书写更为方便简介通俗易懂以下为代码: <!DOCTYPE html> <html><hea ...
左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
html 无缝轮播图完整代码
1,实现轮播效果 2,实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
js实现左右无缝轮播图
今天让我们再来做一个左右无缝的轮播图吧! 一.准备html代码 html代码也叫结构 <!DOCTYPE html> <html lang="zh-CN"> ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

jq 实现无缝轮播图

jq 实现无缝轮播图相关推荐

最新文章

热门文章