无缝轮播滚动html模板,js轮播图无缝滚动效果

缺乏、安全感 2022-10-06 10:53 285阅读 0赞

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：

先文字说明一下：

如果要展示5张图，分别为1,2,3,4,5  那么在代码的引入中是这样的：1,2,3,4,5,1

按顺序的轮播在此就不多说，重点说的是5>1和1>5的轮播

i  表示当前图片的索引

pre 表示上一张图片的按钮

next 表示下一张图片的按钮

ul 表示图片列表

(1)  5>1>2...   当“next”按钮从5到1时按顺序正常轮播，当前图片为第二个“1”时，下一张图片应该是“2”，那么再“next”时是ul的left的值为0，i==1；

(2) 1>5>4....  当“pre”按钮从当前图片“1”(第一个1)轮播到图片5时，i==4，ul的left值变为img宽的-5倍，也就是让第一个1悄悄的变为最后一个1；

用语言表述有点乱，下面放代码：

Document

\*\{padding: 0;margin: 0;\}

.container\{

width: 273px;height: 163px;overflow: hidden;

position: relative;margin: 0 auto;

\}

.list\{

position: absolute;width: 1638px;top: 0;left: 0px;

\}

.list li\{

float: left;list-style: none;

\}

.btn\{

position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;

text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;

\}

.btn:hover\{

background-color: rgba(0,0,0,0.3);color: \#fff;

\}

.pre\{

left: 0;

\}

.next\{

right: 0;

\}

.nav\{

position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;

\}

.nav span\{

width: 10px;height: 10px;border-radius: 10px;background-color: \#fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;

\}

span.on\{

background-color: orange;

\}

*  ![Image 1][]
 *  ![Image 1][]
 *  ![Image 1][]
 *  ![Image 1][]
 *  ![Image 1][]
 *  ![Image 1][]

*>*

*<*

$(function()\{

var i=0;

$('.next').click(function()\{

i++;

console.log(i);

moveImg(i);

\});

$('.pre').click(function()\{

i--;

moveImg(i);

\});

$('.nav span').click(function()\{

var \_index=$(this).index();

i=\_index;

moveImg(i);

\});

// i的作用：决定下一张图片是谁————也就是说ul的left是多少。

// $('.list').css(\{left)的值是从图a过度是此时的ul的left。

function moveImg()\{

if (i==6) \{

i=1;

$('.list').css(\{'left':'0'\});

\}

// 是第一张

if(i==-1)\{

i=4;

$('ul').css(\{left:(5\*-273)\});

\}

$('.list').stop().animate(\{'left':-273\*i+'px'\},1000);

if (i==5) \{

$('.nav span').eq(0).addClass('on').siblings().removeClass('on');

\}

$('.nav span').eq(i).addClass('on').siblings().removeClass('on');

\}

\})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript—原生轮播和无缝滚动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淩亂°似流年/ 2023年10月11日 13:15/ 0 赞/ 44 阅读

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 43 阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 349 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 412 阅读

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

在做轮播图时如果首尾不能连起来的话，效果会有点丑，下面介绍一种我常用的方法：先文字说明一下：如果要展示5张图，分别为1,2,3,4,5 那么在代码的引入中是这样的：1

缺乏、安全感/ 2022年10月06日 10:53/ 0 赞/ 286 阅读

相关 jQuery实现轮播图的无缝滚动

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第

╰半夏微凉°/ 2022年08月04日 14:46/ 0 赞/ 383 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 342 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 424 阅读

相关原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲

r囧r小猫/ 2022年03月08日 11:22/ 0 赞/ 923 阅读

相关无缝轮播图

html: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

系统管理员/ 2021年03月25日 14:39/ 0 赞/ 706 阅读