【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
在此随笔之前，博主已经做过一次图片滑动轮播，如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果，就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果，这是很不美观的，当然也有网站是这样做。但博主参照过很多网站的图片轮播基本上都是无缝的（一张紧接着一张），所以博主也决定自己做一个。
做这个之前博主还在某客学院看了视频教程，此方法为纯jquery方法，比js混合jq方法易懂简洁所以有必要给大家分享一下
先上html代码以及css代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="ongradeanimationCtrl.js" type="text/javascript"></script>
<style type="text/css">
*{
padding:0px;
margin:0px;
border:0px;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
}
#wrapper{
margin:0px auto;
border:0px;
padding:0px;
}
#show-area{
width:800px;
height:450px;
position:relative;
margin:0px auto;
overflow:hidden;
}
#show-area ul{
position:relative;
width:4800px;
height:450px;
right:0;
}
#show-area ul li{
float:left;
width:800px;
}
#controler{
width:120px;
text-align:center;
position:absolute;
top:425px;
left:370px;
z-index:1;
}
#controler div{
height:15px;
width:15px;
border-radius:100%;
background-color:#ccc;
float:left;
margin-left:5%;
opacity:0.9;/*透明度50%*/
filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
}
#button-left{
/*display:none;*/
color:#fff;
position: absolute;
top: 189px;
left: 0px;
width: 60px;
height: 60px;
z-index:2;
background:url(images/left.jpg);
border-radius:100%;
background-size:cover;
opacity:0.5;/*透明度50%*/
filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
#button-right{
/*display:none;*/
color:#fff;
position: absolute;
top: 189px;
left: 740px;
width: 60px;
height: 60px;
z-index:2;
background:url(images/right.jpg);
border-radius:100%;
background-size:cover;
opacity:0.5;/*透明度50%*/
filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
}
.onclick{
background-color:#FFF !important;
}
</style>
</head> <body>
<div id="wrapper">
<div id="show-area"> <ul> <li><a href="#"><img src="data:images/p1.jpg"></a></li>
<li><a href="#"><img src="data:images/p2.jpg"></a></li>
<li><a href="#"><img src="data:images/p3.jpg"></a></li>
<li><a href="#"><img src="data:images/p4.jpg"></a></li> </ul> <div id="button-left" title="下一张"></div>
<div id="button-right" title="上一张"></div> <div id="controler"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
</div>
</div>
</body>
</html>
jquery代码
$(function(){
var i = 0;
var imgWidth = $("#show-area ul li").width();
var clone = $("#show-area ul li").first().clone();
$("#show-area ul").append(clone);
//复制第一张图片并且添加到最后达到无缝连接的效果
var size = $("#show-area ul li").size();//得到所有li的个数
/*第一步*/
//一开始循环添加按钮
for(var j = 0 ; j<size - 1 ; j++){
$("#controler").append("<div></div>");
}
//为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
//所以添加按钮的时候我们也应该添加4个按钮
$("#controler div").eq(0).addClass("onclick");
/*第二步*/
//左按钮
$("#button-left").click(function(){
Toleft();
})
//右按钮
$("#button-right").click(function(){
Toright();
})
/*第3步*/
//按钮移出移入事件
$("#controler div").hover(function(){
i = $(this).index();
clearInterval(timer);
$("#show-area ul").stop().animate({left:-i * imgWidth});
$(this).addClass("onclick").siblings().removeClass("onclick");
$("#index").html("index的值：" + index);
},function(){
timer = setInterval(function(){
Toleft();
},3000)
})
//ul鼠标移出移入事件
$("#show-area ul").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
Toleft();
},3000)
})
//两个方向按钮鼠标移出移入事件
$("#button-left,#button-right").mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer = setInterval(function(){
Toleft();
},3000)
})
//定时器
var timer = setInterval(function(){
Toleft();
},3000)
/*第2.1步*/
//左按钮实现的函数
function Toleft(){
i++;
if(i==size){
//当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）
$("#show-area ul").css({left:0});
i = 1;
}
$("#show-area ul").stop().animate({left:-i*imgWidth},1000);
if(i == size -1){
$("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick");
}else{
$("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
}
/*第2.2步*/
//右按钮实现的函数
function Toright(){
//同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
i--;
if(i==-1){
$("#show-area ul").css({left:-(size - 1)*imgWidth});
i=size-2;
}
$("#show-area ul").animate({left:-i*imgWidth},1000);
$("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");
}
});
【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮的更多相关文章
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
- jQuery插件实现左右无缝轮播
前段时间学习jQuery的时候,在网上找了个SuperSlide插件,做轮播图demo,感觉对于新人而言,还是挺容易上手的,代码量也少. 直接贴代码吧. 1.HTML <!DOCTYPE htm ...
- 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- QTabWidget 使用方法
QTabWidget是Qt中的标签类,由于可切换到标签存在,大大的提高了软件可容纳的控件的数量,通过增加标签,我们几乎有用之不尽的空间,那么我们来看看这个类的一些基本用法: 声明控件: QTabWid ...
- Oracle-表格的建立
表格的建立,在table分列鼠标右键: 在名称写上此表格的名称,最好用英文,中文容易报错.表空间默认为user,也可以自己选择. 数据类型,一个汉字占用3个字节,最好多定义一些字节,防止出错. 可为空 ...
- Defining custom settings in Odoo
Unfortunately Odoo documentation doesn’t seem to include any information about adding new configurat ...
- 内网网段划分ciso交换机配置
内网3750交换机配置: vlan 192 192.168.101.0/24 端口: 1--8vlan 10 10.10.10.0/24 端口: 9--16vlan 172 172.16.172.2/ ...
- 繁简体 互转 js
html: <script type="text/javascript" src="/js/s2t.js"></script><s ...
- 通过 --py-files 可以在pyspark中可以顺利导入
文件import问题 问题: 在脚本中import了其他文件, pyspark中可以运行, 但是在spark-submit中总是失败 假定我们的任务脚本为 app.py , 大体代码像这样: from ...
- HelloWorld的Sprint计划会议
1.Sprint需求 编号 用户故事 故事价值 (点数) 1 作为一名小学生,我想要在玩电脑时玩一种 有趣的小游戏 2 作为一名不怎么爱玩大型游戏的白领(也喜欢玩迷宫游戏), 我想要玩一种可以在家 ...
- MATLAB中提供的线型属性
MATLAB中提供的线型属性有: 线型 说明 标记符 说明 颜色 说明 - 实线(默认) + 加号符 r 红色 -- 双划线 o 空心圆 g 绿色 : 虚线 * 星号 b 蓝色 :. 点划线 . 实心 ...
- php课程---php使用PDO方法详解(转)
本文详细分析了php使用PDO方法.分享给大家供大家参考.具体分析如下: PDO::exec:返回的是int类型,表示影响结果的条数. 代码如下: PDOStatement::execute 返回的是 ...
- 将/home目录从单独的分区迁移回/目录下
安装系统的时候, 将/, swap, /home这三个目录放在了三个不同的分区, 现在希望将/home目录移回/目录下. 1. umount /home, 然后在/目录下创建/home_new, 通过 ...