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

    PS:在开发中我们会遇到一些图片处理问题,比如说缓存图片了.限制图片大小了.查看图片了等.上一篇文章介绍了图片的全景效果查看,今天介绍一个图片缩放,我们如果有时间的话,可以自己写一个属于自己的库,里面 ...

  2. jQuery实现动态选中select

    // jquery实现动态选中select var active = $('.all_sla_title1 .active') var group_name = active.html(); var ...

  3. [CentOS]安装软件问题：/lib/ld-linux.so.2: bad ELF interpreter解决

    环境: [orangle@localhost Downloads]$ uname -m&&uname -r x86_64 2.6.32-220.el6.x86_64 [orangle@ ...

  4. C#-XML-数据传输

    http://www.cnblogs.com/fengxuehuanlin/p/5631664.html 关于xml是属于一个比较重要的东西,在平时开发的过程中,这块内容最主要的是要掌握XML内容的读 ...

  5. xml php 解析

    JSON作为数据交换可以说已经成为了一种事实上的标准,但是前几年和它对应的xml虽然说用的越来越少,但是我感觉还是有他可以应用的地方. json更偏重于程序员来使用和解读,而xml则更适合用户来使用和 ...

  6. [翻译] MGConferenceDatePicker

    MGConferenceDatePicker https://github.com/matteogobbi/MGConferenceDatePicker MGConferenceDatePicker ...

  7. JAXB实现java对象与xml之间转换

    JAXB简介: 1.JAXB能够使用Jackson对JAXB注解的支持实现(jackson-module-jaxb-annotations),既方便生成XML,也方便生成JSON,这样一来可以更好的标 ...

  8. openresty及lua的随机函数

    我们都知道,所谓的随机都是伪随机,随机的结果是由随机算法和随机种子决定的. 所以,当我们没有初始化的时候,如果直接使用math.random(),那么出来的值肯定是每次都一样,因为种子等于0. 因此, ...

  9. September 01st 2017 Week 35th Friday

    Each trauma, is another kind of maturity. 每一个创伤,都是另一种成熟. Sometimes the trauma may be too severe to h ...

  10. codeforces 407D Largest Submatrix 3

    codeforces 407D Largest Submatrix 3 题意 找出最大子矩阵,须满足矩阵内的元素互不相等. 题解 官方做法 http://codeforces.com/blog/ent ...