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

    一.AJAX的介绍 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax =  ...

  2. HttpStatus

    /* * Copyright 2002-2017 the original author or authors. * * Licensed under the Apache License, Vers ...

  3. java笔记--匿名内部类和静态内部类的理解和使用

    匿名内部类 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3889467.html  "谢谢-- 1.由于局部内部类并不可见 ...

  4. Python学习---django之Model语法180124

    django之Model语法[Models] 1    django默认支持sqlite,mysql, oracle,postgresql数据库. <1> sqlite django默认使 ...

  5. How to Remove A Service Entry From Win10 Service List

    Warning Please do this operation CAREFULLY, otherwise you may get something wrong with your system. ...

  6. Kafka生产者producer简要总结

    Kafka producer在设计上要比consumer简单,不涉及复杂的组管理操作,每个producer都是独立进行工作的,与其他producer实例之间没有关联.Producer的主要功能就是向某 ...

  7. problem during schema drop, statement alter table ACT_RU_VARIABLE

    将activiti的databaseSchemaUpdate设置为drop-create抛出DbSqlSession 错误 发布于2015-02-14 16:03:57 浏览7851次 Excepti ...

  8. 前端构建之--gulp

    gulp相关插件: 1.del / gulp-clean 删除文件,用于清空文件 2.browser-sync 用于自动刷新浏览器 3.gulp-htmlmin 用于压缩html 4.gulp-cle ...

  9. JS实现键盘监听(包括组合键)

    依然使用案例驱动~案例是学习的最好实践!   <html>   <head>   <meta http-equiv="Content-Type" co ...

  10. Mac上安装MongoDB

    1.访问MongoDB官方下载地址 http://www.mongodb.org/downloads 2.点击“DOWNLOAD(tgz)”按钮: 3.将下载的文件压缩包解压后剪切到你的Mac中某个位 ...