今天分享一下我自己早几天写的一个效果：无缝轮播，虽然不难，很简单，也没有封装处理过，但是还是希望能帮到一些前端的小伙伴吧，如果有小伙伴感觉有更简化的写法希望可以一起交流一下，技术在于交流嘛，我的邮箱是 15857240771@163.com ,下面就直接上代码了：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

*{

padding: 0;

margin: 0;

list-style: none;

text-decoration: none;

}

.box{

width: 500px;

height: 300px;

border: 1px solid #f00;

margin: 50px auto;

position: relative;

overflow: hidden;

}

.box_ul{

position: absolute;

height: 100%;

left:0;

}

.box_ul li{

float: left;

height: 100%;

box-sizing: border-box;

border: 1px solid #0a9dc7;

}

.togBtn{

width: 500px;

height: 50px;

line-height: 50px;

text-align: center;

border: 1px solid #f00;

margin: 50px auto;

}

.ulReadius{

position: absolute;

z-index: 333;

width: 40%;

left:30%;

bottom: 20px;

height: 20px;

}

.ulReadius li{

width: 15px;

float: left;

height: 15px;

border-radius: 7px;

background: #0a9dc7;

margin: 5px 10px;

}

</style>

</head>

<body>

<div class="box">

<ul class="box_ul">

<li>第一个轮播图</li>

<li>第二个轮播图</li>

<li>第三个轮播图</li>

<li>第四个轮播图</li>

</ul>

<ul class="ulReadius"> </ul>

</div>

<div class="togBtn">点击我暂停或者启动轮播</div>

<script src="../jquery-1.11.3.js"></script>

<script>

(function () {

var page={

//li内容的长度

len:null,

//当前运动到到位置   下标

index:0,

//最外面到盒子

box:$('.box'),

//盒子里面到ul

ul:$('.box_ul'),

//获取一下每一次移动的距离

boxWidth:null,

//是否执行动画

isint:true,

//暂停或者启动按钮

togBtn:$('.togBtn'),

//圆点定位

ulReadius:$('.ulReadius'),

//执行函数

init:function () {

//初始化加载

this.start();

//点击按钮操作是否执行轮播

this.clicktogBtn();

//点击圆点跳转到对于到图片

this.clickRadius();

//鼠标移入暂停动画

this.mouseTog();

},

clicktogBtn:function(){

var that=this;

this.togBtn.click(function () {

that.isint=!that.isint;

})

},

//初始化执行

start:function(){

this.len=this.ul.children('li').length;

var liHtml=this.ul.children('li:nth-child(1)').get(0).outerHTML;

this.ul.append(liHtml)

//获取box的宽度   li的宽度和box的宽度一致

var boxwidth=this.box.width();

//获取ul的宽度   根据li的总长度来获取

var ulwidth=boxwidth*(this.len+1);

//给ul和li添加上宽度

this.ul.css({

width:ulwidth+'px'

})

this.ul.children('li').css({

width:boxwidth+'px'

})

//每一次移动的距离

this.boxWidth=boxwidth;

var that=this;

//定时器执行轮播

setInterval(function () {

that.indexPosition()

},1000)

var tlen=this.len;

this.rediusStyle(tlen);

},

//小圆点的样式

rediusStyle:function(len){

var liHtml=[];

for(var i=0;i<len;i++){

liHtml.push('<li></li>')

}

this.ulReadius.append(liHtml.join(""));

},

//点击小圆点

clickRadius:function(){

var that=this;

this.ulReadius.on('click','li',function () {

that.isint=true;

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

that.index=index-1;

that.indexPosition();

that.isint=false;

})

},

//移入的时候暂停动画   移出继续执行动画

mouseTog:function(){

var that=this;

this.box.mousemove(function () {

that.isint=false;

}).mouseout(function () {

that.isint=true;

})

},

indexPosition:function () {

//判断是否启用轮播动画

if(!this.isint){

return true;

}

//指针指向全局page对象

var that=this;

//每执行一次轮播一个图片   下标+1

that.index++;

// 因为是向右边滚动到  所以是负数

that.ul.animate({

left:-that.index*that.boxWidth

},300,function () {

//根据len的长度判断是否已经轮播到最后一张  如果到最后一张  那么复原从新开始轮播

if(that.index==that.len){

that.ul.css({

left:0

},300)

that.index=0;

}

})

}

}

page.init();

})(jQuery)

</script>

</body>

</html>

jq写无缝轮播的更多相关文章

  1. 手写无缝轮播banner

    <div class="banner"> <ul class="clearfloat bannerul xin" id="xin&q ...

  2. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  3. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  4. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  5. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  6. 记一个jquery 无缝轮播的制作方法

    接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...

  7. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  8. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  9. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

随机推荐

  1. 最好的原型和流程图绘制工具：OmniGraffle_交互设计

    原文地址:http://www.shangxueba.com/jingyan/2230668.html 使用哪种原型设计工具"大概是设计师闲聊时出现频率最高的话题之一.据我了解一般以Visi ...

  2. JAVA后台框架优化之日志篇

    1.日志规范 各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...

  3. visual studio code 输出乱码

    问题: 解决方法: 首先,这个与VS本身无关,问题是出现在windows的dos显示设置上. 如何解决这个问题? 1.打开运行,输入cmd: 2.界面顶部右键,选择默认值: 3.将437(OEM-美国 ...

  4. Sys.WebForms.PageRequestManagerParserErrorException: 常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪

    Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息,之所以出现此错误,常见的原因是:通过调用Response.Writ ...

  5. 基于双下划线的跨表查询 (join查询)

    因为你的数据库中的查询就是重点  那么你的django提供的orm也是查询语句最重点 ,也提供的查询方法比较的多,下面我们学习下类似于MYSQL的连表(join)查询 Django 还提供了一种直观而 ...

  6. 《C++ Primer Plus》读书笔记之四—分支语句和逻辑操作符

    第六章 分支语句和逻辑操作符 1.&&的优先级低于关系操作符. 2.取值范围:取值范围的每一部分都使用AND操作符将两个完整的关系表达式组合起来: if(age>17&& ...

  7. Oracle shared server模式连接ORA-12519

    设置了shared server连接,dispatcher进程和shared server进程都没有问题listener.ora文件配置如下:LSNR2=  (DESCRIPTION=    (ADD ...

  8. [日常] NOIp 2018 滚粗记

    考试前预感到自己会滚大粗 然后发现确实滚了个大粗 ==== €€£ WARNING ==== 因为是后补的所以更新速度比较慢 最后决定把半成品扔出来 预计本周末放假会更完吧 2019.2.25 upd ...

  9. Asp.net & Aspose.cells 导入

    Workbook workBook = new Workbook(this.fuFile.FileContent); Aspose.Cells.Worksheet sheet = workBook.W ...

  10. shouldRasterize 光栅化、（缓存）复用、内存、内容稳定

    使用场景:稳定的视图(layer)被反复使用或进行动画: 本质:牺牲内存解放cpu: 反例:牺牲内存牺牲cpu. 单次使用或者视图有变动,shouldRasterize不会有任何用途,反而会牺牲内存. ...