html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细

这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过。但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解。

由于无聊就自己动手去写，发现其实很简单，反而去参考别人的会把自己绕晕，下面我附上代码，以及注释，如果有什么看不懂的还可以问我。

Insert title here

*,ul,a{

margin:0;

padding:0;

border:0;

list-style:none;

text-decoration:none;

}

#banner_wrap{

width:1000px;

height:400px;

margin:0 auto;

border:1px solid #c0a599;

margin-top:30px;

position:relative;

overflow:hidden;

}

#banner{

position:absolute;

height:400px;

}

.oLi{

width:1000px;

height:400px;

float:left;

}

//用到的是jQuery代码,不介绍代码单个意思

$(function(){

//获取li的长度

var len=$(".oLi").length;

//把所有li的宽度算好,赋值给ul当宽度

$("#banner").width($(".oLi").eq(0).width()*len);

//id是为了后面的计时器暂停设置的

var id;

//index用来统计滚动次数

var index=0;

//启动计时器

id=setInterval(start,3000);

//给ul(#banner)添加hover选择器事件

$("#banner").hover(function(){

//鼠标进入的时候暂停

clearInterval(id);

},function(){

//鼠标离开的时候开始

id=setInterval(start,3000);

});

//计时器中执行的代码块

function start(){

//执行的时候次数++

index++;

//用animate设置ul的left属性,与左边的距离

$("#banner").animate({'left':-$(".oLi").eq(0).width()*(index%len)});

//实现无缝轮播的关键地方

//判断index%len的值index%len=0的时候表示第一张,那么len-1表示最后一张,

//最后一张与第一张一模一样,所有直接修改left属性

if(index%len==(len-1)){

$("#banner").animate({'left':0},0);

//同时给index+1跳过第一张图的再次加载

index++;

}

//实际的加载情况就是第一张,第二张,第三张,第四张,第五张(瞬间改变图片为第一张的,是一模一样的替换,不是滚动,看不出来,所以称之为无缝轮播),第二张...

}

});

html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细相关推荐

使用jQuery写一个简单的轮播图（笔记）
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
使用jQuery，写一个简单的轮播图，实现切换功能！
1.谈到jquery,想必大家都知道,它是一个js库.使用起来简单又方便,接下来就给大家看看我用jquery实现的轮播图吧! <!DOCTYPE html> <html lang=& ...
jQuery——实现一个3D动态轮播图
先看效果图(挺好看的小妹妹,制作完gif图就这么丑了): css代码: <!DOCTYPE html> <html lang="en"> <head& ...
jQuery实现一个简单的轮播图
一.轮播图内容组成包括:4张图片,图片标号,向左翻页,向右翻页的几个部分,如下图所示: 二.实现功能 1.加载页面后,4张图片默认从第一张图片开始轮播,索引值为1. 2.当把鼠标over到图片上时, ...
快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
Jquery版轮播图超详细
目录主要功能介绍: 1.先搭建框架 2.html和css代码三.jquery代码原生js的轮播图也写过,如需观看请您移步我的其他文章~ 主要功能介绍: 鼠标移动到轮播图中显示左右按钮,轮播图片的 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...

html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细

html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细相关推荐

最新文章

热门文章