今天分享一下我自己早几天写的一个效果：无缝轮播，虽然不难，很简单，也没有封装处理过，但是还是希望能帮到一些前端的小伙伴吧，如果有小伙伴感觉有更简化的写法希望可以一起交流一下，技术在于交流嘛，我的邮箱是 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. c# 获取程序目录

    取得控制台应用程序的根目录方法1:Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径2:AppDomain.CurrentDomain.BaseDirect ...

  2. 沉淀，再出发：Django的简单使用

    沉淀,再出发:Django的简单使用 一.前言     在学习了python的基础语法之后,其实大家都很怀疑python的使用场景,其实python在很多场合都有很强的适应性,就比如说web开发之中使 ...

  3. August 02nd 2017 Week 31st Wednesday

    Love means never having to say you are sorry. 爱就是永远不必说对不起. If there is ture love, you will never do ...

  4. python3程序设计基本方法

    实例 6.升级维护 总结: 打了多年的游击战.突然经过教官的指导,觉得很受益,程序自学需要总结和交流.

  5. npm 使用国内镜像的方法

    npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便.我们通过设置使用淘宝的镜像来加快我们的速度. 临时使用 n ...

  6. Wannafly挑战赛18 E 极差（线段树、单调栈）

    Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...

  7. Burp Suite使用介绍总结

    Burp Suite使用介绍(一) 小乐天 · 2014/05/01 19:54 Getting Started Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些 ...

  8. JAVA对象与内存控制

    1.1 实例变量和类变量 成员变量和局部变量: 局部变量分为三大类: 1)形参:在方法签名中定义的局部变量,由方法调用者为其赋值,随方法的结束而消亡. 2)方法内的局部变量:在方法内定义的局部变量,随 ...

  9. JavaScript（核心、BOM、DOM）

    http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...

  10. urllib下使用Xpath表达式示例

    urllib下使用Xpath表达式示例 使用xpath表达式需要先将需要匹配的数据转换成tree格式,这就需要先装lxml模块.安装方法可以使用pip安装. 示例代码: import urllib.r ...