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

  2. 解决nginx使用proxy_pass反向代理时,session丢失的问题

       这2天在测试Nginx作为反向代理到Tomcat应用时,session丢失的问题.经过一系列查看官方文档和测试,发现如下:1.如果只是host.端口转换,则session不会丢失.例如:     ...

  3. C# winform中 窗体缩放自适应的方法（不同电脑/不同分辨率）

    C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)   窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...

  4. java正则表达式校验移动电话、固话、邮编的校验

    package com.tmall.epp.web.module.util; import java.util.regex.Pattern; /** * 移动电话.固话.邮编的校验 * @since  ...

  5. Python初学者第十七天 函数（1）

    17day 函数 1.函数定义: 函数 是指将一组语句的集合通过一个名字(函数名)封装起来,想要执行这个函数,只需调用其函数名即可 2.函数的特性: a 减少重复代码 b 使程序变得可扩展 c 使程序 ...

  6. December 14th 2016 Week 51st Wednesday

    Everything has its time and that time must be watched. 万物皆有时,时来不可失. Everything has its time, and I r ...

  7. source insight设置问题 [问题点数：20分，结帖人leecapacity]

    http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763104687270e54f7327d818c027fa3cf1fd5791d1c05 ...

  8. 对Java中的异常的理解

    1.What is exception in Java? Java使用异常描述程序中可能出现的不正常情况.这个不正常可以是java认为的不正常,也可以是你主观上的出乎意料(自定义异常).总而言之,异常 ...

  9. windows系统查看端口占用程序方法

    开始---->运行---->cmd,或者是window+R组合键,调出命令窗口   输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是49157, ...

  10. HTML的CoreText流畅度超过WebView。CoreText第三方框架DTCoreText的介绍

    为什么要用CoreText(富文本)来取代WebView去显示内容.主要的原因就WebView有很大的问题,性能,FPS,卡顿,与原生不搭.这些都是大问题. WebView的缺点 1.直接使用WebV ...