jq写无缝轮播
今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 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写无缝轮播的更多相关文章
- 手写无缝轮播banner
<div class="banner"> <ul class="clearfloat bannerul xin" id="xin&q ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
随机推荐
- 最好的原型和流程图绘制工具:OmniGraffle_交互设计
原文地址:http://www.shangxueba.com/jingyan/2230668.html 使用哪种原型设计工具"大概是设计师闲聊时出现频率最高的话题之一.据我了解一般以Visi ...
- JAVA后台框架优化之日志篇
1.日志规范 各业务系统日志需要统一,以方便查看.收集日志, 日后统一ELK日志管理,以下为项目的日志配置, 这是兼容当前系统的日志,以后推行微服架构时会有变动,但日志存放方式不会改变,日后会推行sp ...
- visual studio code 输出乱码
问题: 解决方法: 首先,这个与VS本身无关,问题是出现在windows的dos显示设置上. 如何解决这个问题? 1.打开运行,输入cmd: 2.界面顶部右键,选择默认值: 3.将437(OEM-美国 ...
- Sys.WebForms.PageRequestManagerParserErrorException: 常见的原因是:通过调用Response.Write()修改相应时,将启用响应筛选器、HttpModules或服务器追踪
Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息,之所以出现此错误,常见的原因是:通过调用Response.Writ ...
- 基于双下划线的跨表查询 (join查询)
因为你的数据库中的查询就是重点 那么你的django提供的orm也是查询语句最重点 ,也提供的查询方法比较的多,下面我们学习下类似于MYSQL的连表(join)查询 Django 还提供了一种直观而 ...
- 《C++ Primer Plus》读书笔记之四—分支语句和逻辑操作符
第六章 分支语句和逻辑操作符 1.&&的优先级低于关系操作符. 2.取值范围:取值范围的每一部分都使用AND操作符将两个完整的关系表达式组合起来: if(age>17&& ...
- Oracle shared server模式连接ORA-12519
设置了shared server连接,dispatcher进程和shared server进程都没有问题listener.ora文件配置如下:LSNR2= (DESCRIPTION= (ADD ...
- [日常] NOIp 2018 滚粗记
考试前预感到自己会滚大粗 然后发现确实滚了个大粗 ==== €€£ WARNING ==== 因为是后补的所以更新速度比较慢 最后决定把半成品扔出来 预计本周末放假会更完吧 2019.2.25 upd ...
- Asp.net & Aspose.cells 导入
Workbook workBook = new Workbook(this.fuFile.FileContent); Aspose.Cells.Worksheet sheet = workBook.W ...
- shouldRasterize 光栅化、(缓存)复用、内存、内容稳定
使用场景:稳定的视图(layer)被反复使用或进行动画: 本质:牺牲内存解放cpu: 反例:牺牲内存牺牲cpu. 单次使用或者视图有变动,shouldRasterize不会有任何用途,反而会牺牲内存. ...