jquery轮播图无缝连接实现
经过一段时间的学习和实践，以及参考了许多中idea之后，实现了这个轮播图无缝链接。（这只是本人自己的方法）步骤如下：
（1）要实现无缝连接，最好是有若干张长宽都一样的图片（数量大概在3到6张，多的就少见了）。设置一个外盒（固定不动，也就是展示一张图片的作用），大小是一张图片大小（长和宽与图片一致）。
（2）在外盒子里面设置一个内盒子，这些图片全部包含内盒子里面，按照一字型排开，也就是设置显示在同一行上，设置图片浮动就可以实现（当然同一列也是一个道理）。，这个盒子的长度为所有图片的宽度的和（也就是图片数目x图片宽度），高度为图片的高；按照这种情况下，内盒宽度比外盒大，所以将内盒子溢出隐藏（css属性overflow：hidden）这样我们就只看到一张图片了，也是第一张。
（3）每次点击向后移动按钮的时候，我们需要向后移动一张图片距离，实现方法是内盒（包含图片的盒子）向前移动一张图片的距离，这样我们在外盒看到的就是下一张图片了。因为只有一定数量的图片，移动到最后一张图片的时候，我们就要转到第一张，实现的方法是将第一张图片移动到最后一张图片后面（使用的是jQuery的append（）方法，当前如果包含有该元素，就将它移动到最后面），这个时候第一张图片之后的图片前移了一个图片距离，所以我们首先将内盒的位置前移一个图片距离（为了当前显示的还是最后一张），然后在做后移一个图片距离就是第一张，不断操作就行了。
（4）点击向前移动时，和向后一样，区别是将最后一张移动到第一张（使用prepend方法），所以内盒要先向后移动一个图片距离，然后在前移一个图片距离。
（5）自动轮播，本人设置默认每相隔3s向后移动一张图片，使用setinterval（后移函数，3s）定时器来实现
（6）图片序号显示，要监听到当前显示的第几张图片，给相应的图片序号点亮，点击其他图片序号的时候，要移动到点击的序号上，先判断点击的图片的序号是比当前显示的序号大还是小，小的话是向前移动（前移函数），大的话后移（后移函数）。移动次数是图片序号的差值。
具体代码如下：
布局显示：
<div id="box"><ul><li><img src="img/array1.jpg" alt=""></li><li><img src="img/array2.jpg" alt=""></li><li><img src="img/array3.jpg" alt=""></li><li><img src="img/array4.jpg" alt=""></li></ul><ol><li class="now">1</li><li>2</li><li>3</li><li>4</li></ol><input type="button" id="prev" value="<"><input type="button" id="next" value=">"></div>css代码： 注意使用了定位
<style>*{margin: 0;padding: 0;}ul,li{list-style: none;}#box{position: relative;height: 450px;width: 800px;margin: 0 auto;overflow: hidden;}ul{position: absolute;width: 4000px;height: 450px; top: 0; }ul li{float: left;}#prev{position: absolute;border: none;height: 60px;width: 40px;background: rgba(255,255,255,0.4);left: 0;top: 50%;margin-top: -15px;font-size: 40px;color: #fff;}#next{position: absolute;border: none;height: 60px;width: 40px;background: rgba(255,255,255,0.4);right: 0;top: 50%;margin-top: -15px;font-size: 40px;color: #fff;}ol{position: absolute;bottom: 30px;width: 200px;height: 20px;left: 50%;margin-left: -100px;}ol li{text-align: center;height: 100%;float: left;border-radius:50% ;width: 20px;background: #fff;margin-left: 24px;}.now{background: #f60;font-size: 18px;font-weight: 800;}</style>jquery部分：
<script>$(document).ready(function() { var offset = 0;
var array = [1, 2, 3, 4];
//var nowimg=1; //当前图片序号
var count = 0; //count和flag是为了限制按钮点击间隔（只是前移和后移按钮）
var flag = null;
var count1 = 0;
var flag1 = null;
var nextpic = function() { //后移函数
if(offset == -2400) {
offset += 800; //最后一张图片时，先前移一张图片距离
$('ul').append($('ul li').first()) //将第一张图片移到最后一张
value = offset + "px";
$('ul').css('left', value) //看到的还是最后一张图片（不过位置是倒数第二张）
}
offset -= 800
value = offset + "px"
$('ul').animate({
left: value
}); //后移一张图片+动画效果
getindex();
getnum();
}
var prepic = function() { //前移函数
if(offset == 0) {
offset -= 800; //第一张图片时，先后移一张图片距离
$('ul').prepend($('ul li').last()) //将最后一张图片移到第一张
value = offset + "px"
$('ul').css('left', value) //看到的还是第一张图片（不过位置是第二张）
}
offset += 800
value = offset + "px"
$('ul').animate({
left: value
}); //前移一张图片+动画效果
getindex()
getnum()
} function done() { //点击时间间隔函数
if(count == 0) {
clearInterval(flag); //清除定时器，也就是解开点击限制
} else {
count = count - 1;
}
} function done2() { //点击时间间隔函数
if(count1 == 0) {
clearInterval(flag1); //清除定时器，也就是解开点击限制
} else {
count1 = count1 - 1;
}
}
var getindex = function() { //图片当前排列序号记录在数组array中
var imglist = $('ul li img');
for(var i = 0; i < array.length; i++) {
if(imglist.eq(i).attr('src') == "img/array1.jpg") {
array[i] = 1
} else if(imglist.eq(i).attr('src') == "img/array2.jpg") {
array[i] = 2
} else if(imglist.eq(i).attr('src') == "img/array3.jpg") {
array[i] = 3
} else if(imglist.eq(i).attr('src') == "img/array4.jpg") {
array[i] = 4
}
}
}
var getnum = function() {
//获取当前显示的是第几张图片的序号，并且给当前序号点亮的效果
if(offset == -2400) {
$('ol li').eq(array[3] - 1).addClass('now').siblings().removeClass('now');
} else if(offset == 0) {
$('ol li').eq(array[0] - 1).addClass('now').siblings().removeClass('now');
} else if(offset == -800) {
$('ol li').eq(array[1] - 1).addClass('now').siblings().removeClass('now');
} else if(offset == -1600) {
$('ol li').eq(array[2] - 1).addClass('now').siblings().removeClass('now');
}
}
$('#next').click(function() {
//后移按钮点击触发函数
if(count == 0) {
nextpic();
count = 20;
flag = setInterval(done, 100); //设置点击时间间隔为2s
}
})
$('#prev').click(function() {
//前移按钮点击触发函数
if(count1 == 0) {
prepic();
count1 = 20;
flag1 = setInterval(done2, 100);
} })
setInterval(function() {
//自动轮播函数，只有向后移动,5s一次
nextpic(); }, 5000) $('ol li').click(function() {
//序号点击事件
var nowimg = $('ol li.now').text();
var clicknum = $(this).text()
$('ol li').eq(clicknum - 1).addClass('now').siblings().removeClass('now');
if(clicknum < nowimg) {
//点击的序号比当前显示的小
if(offset >= -2400 && array[3] == 4) {
//图片按照顺序排列的时候，直接前移差值个数的图片宽度
offset += (nowimg - clicknum) * 800;
value = offset + "px";
$('ul').animate({
left: value
});
} else {
//不按照原始的序号，就先重排图片为原始的序号，再做前移
for(var i = array[3]; i == 4; i++) {
$('ul').append($('ul li').first());
offset += 800;
}
console.log(array[3])
value = offset + "px";
$('ul').css('left', value);
offset += (nowimg - clicknum) * 800
value = offset + "px";
$('ul').animate({
left: value
});
}
getindex()
} else if(clicknum > nowimg) {
//图片按照顺序排列的时候，直接后移移差值个数的图片宽度
if(offset >= -2400 && array[3] == 4) {
offset -= (clicknum - nowimg) * 800;
value = offset + "px";
$('ul').animate({
left: value
});
} else {
//不按照原始的序号，就先重排图片为原始的序号，再做后移
for(var i = 0; i < clicknum - nowimg; i++) {
nextpic();
}
}
getindex()
}
})
})
</script>jquery轮播图无缝连接实现相关推荐
- JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
- html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法 在页面 ...
- html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
- 简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
- android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
- 响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法 在页 ...
- html 轮播怎么用jq设置,jQuery轮播图功能实现方法
本文实例为大家分享了jQuery轮播图功能的实现代码,供大家参考,具体内容如下 jQuery轮播(无animation) html布局 5 1 2 3 4 5 1 < > CSS /* 轮 ...
- html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...
- 简易jQuery轮播图插件
轮播图插件为简易的jQuery轮播图,实现点击无缝轮播,可用在移动端. 样式有问题,叠加修改即可. 下载地址:https://github.com/Summer-Lin/carousel HTML代码 ...
最新文章
- Linux的文件夹及文件的权限
- mysql断网_mysql数据库断网链接
- mysql 6.3 入门_Mysql 入门小练习
- 区块链BaaS云服务（36）欧盟EBSI“使用场景”
- linux下创建和删除目录
- 递归反转链表的一部分
- oracle怎么通过sid确定表名,如何获取Oracle的SID列表
- 需求规格说明书1.0
- Python time 获取本地时间戳（包含毫秒）
- CentOS 下安装JDK
- Anomaly Detection异常检测基础
- java中常用的类——Object类
- doubango安卓端的帧率太低，解决办法
- 日记20190408 感知层数据格式
- 【阵列信号处理02--基本概念、窄带信号、均匀线阵接收模型】
- 几个通用有限元软件简介
- 计算机组成原理（第三版）唐朔飞-第四章存储器-课后习题
- 萨达撒 这篇 Java 基础，我吹不动了
- 计算机鼠标双击怎么,鼠标双击变成属性怎么办 鼠标双击变成属性解决办法【详解】...
- 使用spark.streaming.kafka.consumer.poll.ms和reconnect.backoff.ms解决spark streaming消费kafka时任务不稳定的问题