JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果：
HTML代码：
<body>
<!-- /*觅me 探索生活*/ -->
<div class="test">
<!-- 觅me 探索生活 》 标题 -->
<div class="test-title">
<span>觅me</span>
<img src="./images/logo.png" alt="">
<span>探索生活</span>
</div>
<!-- 觅me 探索生活 滑动区域 -->
<div class="test-scroll">
<div class="test-scroll-1">
<img src="./images/3.webp" alt="">
<br>
<span>看中性价比和安全，17万出头买福特翼虎值得吗？</span>
<br>
<span>
预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。
</span>
</div>
<div class="test-scroll-1">
<img src="./images/1.webp" alt="">
<br>
<span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span>
<br>
<span>
放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！
</span>
</div>
<div class="test-scroll-1">
<img src="./images/2.webp" alt="">
<br>
<span>133万全款订车三年后提车，也就特斯拉能干得出来</span>
<br>
<span>
众筹搞项目在前俩年就像现如今的共享经济一样繁荣，其中混着不少投机分子盯着老百姓的荷包忽悠，当然也有不少蛮不错的项目，让好的概念得以面市，只不过众筹这种形式都是玩玩小钱的，大不了就万把块钱，然而这个地球就有人牛气，搞个项目能哄的全球的有钱人乖乖掏钱，而且一套就是133万......
</span>
</div>
<div class="test-scroll-1">
<img src="./images/3.webp" alt="">
<br>
<span>看中性价比和安全，17万出头买福特翼虎值得吗？</span>
<br>
<span>
预算十七八万，如果要选择合资紧凑型SUV，选择面其实并不多，几款老牌劲旅，本田CR-V、日产奇骏、丰田RAV4、福特翼虎、马自达CX-5，而且这个价位能选择的，大多数是这些车型的中低配，甚至是低配，所以就需要消费者在这其中做选择的时候，权衡方方面面的因素要更多了，这些车型都有自己的消费者群体。
</span>
</div>
<div class="test-scroll-1">
<img src="./images/1.webp" alt="">
<br>
<span>挑飞度战五菱，这款7.99万起的比亚迪，能走上神坛？</span>
<br>
<span>
放开二胎政策后，给国内的汽车市场注入了一剂猛药，因此催生了一个词——二胎车。很多人买7座车，不论是MPV还是7座SUV，给人的第一感知是要生二胎了？针对二胎车，合资品牌推出众多相应的车型，自主品牌更是纷纷效仿。但由于自主品牌自身在研发的不足，导致中国的“二胎车”缺乏国际范，不过下面这款比亚迪车型，或许颠覆我们对自主MPV的看法，走上神坛！
</span>
</div>
</div>
<!-- 觅me 探索生活 滚动按钮 -->
<div class="test-scroll-btn">
<span class="selected"></span>
<span></span>
<span></span>
</div>
<!-- 觅me 探索生活 左右按钮 -->
<div class="test-btn">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
</body>
CSS代码：
<style>
*{
padding:;
margin:;
}
body{
background:#F0F3EF;
}
/*觅me 探索生活*/
.test{
width:390px;
height:450px;
background: #fff;
position: relative;
margin:100px;
padding:20px;
box-sizing:border-box;
overflow:hidden;
}
/*觅me 探索生活 --> 标题*/
.test-title{
margin-bottom: 4px;
}
.test-title>span:first-child{
color:#222;
font-size:22px;
font-weight:bold;
}
.test-title img{
vertical-align: middle;
}
.test-title>span:last-child{
color:#999;
font-size:14px;
} /*觅me 探索生活 --> 滑动区域*/
.test-scroll{
width:1950px;
height:355px;
border-bottom:1px solid #f5f5f5;
position: absolute;
left:-390px;
display: flex;
justify-content:space-around;
cursor:pointer;
}
.test-scroll-1{
/*margin:0 20px;*/
width:350px;
height:355px;
display: inline-block;
/*border:1px solid;*/
}
/*觅me 探索生活 --> 滑动区域 --> 标题*/
.test-scroll-1>span:first-of-type{
display: inline-block;
width:350px;
height:50px;
line-height: 50px;
color:#333;
font-size:16px;
/*border:2px solid;*/
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.test-scroll-1>span:last-of-type{
display: inline-block;
width:350px;
height:40px;
color:#999;
font-size:14px;
/*border:2px solid;*/
overflow:hidden;
text-align:center;
} /*觅me 探索生活 滚动按钮*/
.test-scroll-btn{
position: relative;
/*border:1px solid;*/
top:355px;
text-align:center;
}
.test-scroll-btn>span{
display: inline-block;
width:6px;
height:6px;
border:2px solid #b9beba;
border-radius:50%;
margin:10px 4px 0 4px;
cursor:pointer;
}
.test-scroll-btn .selected{
background: #eb3436;
border:2px solid transparent;
box-shadow:0 0 2px #eb3436;
}
/*觅me 探索生活 左右按钮*/
.test-btn{
width:100%;
height:40px;
position: absolute;
left:0px;
top:50%;
margin-top:-20px;
/*border:1px solid;*/
}
.test-btn>span{
width:20px;
height:40px;
line-height:40px;
text-align:center;
display: inline-block;
font-size:20px;
background: #d9d9d9;
color:hsla(0,0%,100%,.4);
}
.test-btn>span:last-child{
float:right;
}
.test-btn>span:hover{
cursor:pointer;
background: #999999;
}
</style>
JS代码:
<script src="./js/slidings.js"></script>
<script>
var params={
client:$('.test'),
move:$('.test-scroll'),
moveChild:$('.test-scroll>div'),
scrollBtn:$('.test-scroll-btn span'),
scrollBtnColor:'selected',
nextBtn:$('.next'),
prevBtn:$('.prev'),
i:1,
timer:null,
times:1200
} slidings(params);
</script>
插件代码：
function slidings(params){
params.timer=setInterval(function(){
params.i++;
moveImg(params.i)
},params.times);
$(params.client).hover(function(){
clearInterval(params.timer)
},function(){
params.timer=setInterval(function(){
params.i++;
moveImg(params.i)
},params.times);
})
$(params.nextBtn).click(function(){
params.i++;
moveImg(params.i);
});
$(params.prevBtn).click(function(){
params.i--;
moveImg(params.i);
});
$(params.scrollBtn).click(function(){
var _index=$(this).index()+1;
params.i=_index;
moveImg(params.i);
});
function moveImg(){
if (params.i == params.moveChild.length-1) {
console.log(params.i);
params.i=1;
$(params.move).css({'left':'0'});
}
if(params.i == 0){
params.i=params.moveChild.length-2;
$(params.move).css({left:((params.moveChild.length-1)*-params.client.outerWidth())});
}
$(params.move).stop().animate({'left':-params.client.outerWidth()*params.i+'px'},params.times,function(){
});
if (params.i == params.moveChild.length-1) {
$(params.scrollBtn).eq(0).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor);
}else{
$(params.scrollBtn).eq(params.i-1).addClass(params.scrollBtnColor).siblings().removeClass(params.scrollBtnColor);
}
}
}
插件使用说明:
无缝轮播图： 滑动的是改变move的left，而非moveChild；
页面布局样式：
(1)一开始布局时，第一图前有最后一图，最后一图后有第一图
(2)style{ move --> position: absolute
--> left: -client.outerWidth() }
3区域：
client 可视区域
move 滑动区域
moveChild 滑动区域的每一个子块
2按钮：
scrollBtn 滚动（点击）按钮
scrollBtnColor 滚动（点击）按钮添加类名改变当前按钮颜色
nextBtn/prevBtn 左右按钮
初始值
i=1 代表下标0是最后图，下标1是第一图
// 注：i=1的原因是，一开始布局时，第一图前有最后一图，最后一图后有第一图，
// 为了第一眼看到的是第一图，要做move.style.left=moveChild.width，且初始时第一图下标是1而非0
timer 定时器名称（自动轮播）
times 动画时间
var params={
client:$('.container'),
move:$('.list'),
moveChild:$('.list li'),
scrollBtn:$('.nav span'),
scrollBtnColor:'.selected'
nextBtn:$('.next'),
prevBtn:$('.pre'),
i:1,
timer:null,
times:2000,
} slidings(params);
JQ无缝轮播图-插件封装的更多相关文章
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- vue轮播图插件之vue-awesome-swiper
移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...
随机推荐
- 【freeradius3】安装和拓展需求
这次主要来看看 freeradius的安装,以及Python拓展的例子,还有计费字段根据厂家进行拓展. 3.0版本的安装 参考文章 yum install libtalloc-devel wget - ...
- Linux - RAID和LVM
什么是 RAID 磁盘阵列全名是『 Redundant Arrays of Inexpensive Disks, RAID 』,英翻中的意思是:容错式廉价磁盘阵列. RAID 可以透过一个技术(软件或 ...
- 初探linux子系统集之i2c子系统(一)
I2c子系统在进公司来的时候就学习过了,可是那是还不是很熟悉linux中的i2c子系统,就没有细看.记得当初很想熟悉linux中的各种总线驱动,想专门写一个关于总线驱动的专集,后来发现好像就没有几个, ...
- Java Socket:Java-NIO-Selector
Selector 的出现,大大改善了多个 Java Socket的效率.在没有NIO的时候,轮询多个socket是通过read阻塞来完成,即使是非阻塞模式,我们在轮询socket是否就绪的时候依然需要 ...
- OpenLayers3的WMS空间查询实现多个图层
空间查询前面的帖子写过,但是在一次性查询多个图层的时候卡了一下,再次记录下. 1.WMS数据源: var wmsSource = new ol.source.TileWMS({ url:'http:/ ...
- 视频博文结合的教程：用nodejs实现简单的爬虫
教学视频地址: https://v.qq.com/x/page/b0643tut4ze.html 前言 本喵最近工作中需要使用node,并也想晋升为全栈工程师,所以开始了node学习之旅,在学习过 ...
- access登录窗口校验代码一
Private Sub login_Click()If IsNull(Me.username) ThenMsgBox "请输入用户名!", vbExclamationElseIf ...
- Android开发阅读文档资源
Android Studio:工具:http://developer.android.com/intl/zh-cn/tools/studio/index.html培训教程:http://develop ...
- 绕过校园网WEB认证_iodine实现
这篇文章是对我的上一篇文章"绕过校园网WEB认证_dns2tcp实现"的补充,在那篇文章中,我讲述了绕过校园网WEB认证的原理,并介绍了如何在windows系统下绕过校园网WEB认 ...
- C#WebService 出现No 'Access-Control-Allow-Origin' header is present on the requested resource
C#WebService 出现No 'Access-Control-Allow-Origin' header is present on the requested resource 解决办法: 在c ...