【实践】纯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 ...
随机推荐
- Linux任务调度命令（轻松管理Linux）
Linux任务调度其实就是让系统在某个时间执行某些命令或者程序,这样可以让管理员更加轻松地管理自己的Linux,当我刚了解到这个方法时,我的内心充满了无尽的欣喜,感觉Linux实在是太强大了. 下面我 ...
- 利用iframe将div放置在object的上面
这两天在写一个用object上传照片的网页,在上传时,需要弹出一个进度条的div,我就按照正常的思维模式,将进度条div设为绝对定位,将其z-index设置的很大,结果,进度条div被object给遮 ...
- Linux_linux中profile、bashrc、bash_profile之间的区别和联系(转)
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. 英文描述为: # /etc/p ...
- getPos,offsetTop
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- c# select标签绑定枚举,并以Description做Text显示
今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...
- Java中的Bigdecimal类型运算
Java中的Bigdecimal类型运算 双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的数进行运算和处理.Java在java.math包中提 供的API类BigD ...
- CCF认证(1)
#include <iostream> #include <windows.h> using namespace std; typedef struct letter{ int ...
- SVN 的安装与配置
1.下载subclipse1.6的site包 2.把这个site-1.6.2解压开,将其内部的文件,全部放到 C:\Program Files\MyEclipse\MyEclipse 9\dropin ...
- 让dwz 在td里显示图片
让dwz 在td里显示图片 <!@{foreach from = $list item = element}@> <tr target="gid" rel=&qu ...
- Session 知识点再整理（二） 自定义 Session 存储机制
对于访问量大的网站,用默认的 Session 存储方式(以文件存储)不适合,因为文件的 I/O 开销会非常大,另外 Session 机制本身使 Session 不能跨机访问,在 Web 集群中无法达到 ...