【实践】纯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 ...
随机推荐
- C#字符串处理（String与StringBuilder）
首先介绍一下常用的几个功能:Compare(str1,str2)——比较两个字符串str1,str2的大小,如果大于返回正数,等于返回0,小于返回负数!IndexOf——定位字符串中第一次出现某个给定 ...
- .net的五层架构
原文章地址是http://www.360doc.com/content/11/1210/21/19147_171335782.shtml 我们刚开始学习架构的时候,首先会想到分层的概念,分层架构比较经 ...
- Dependency Injection
Inversion of Control - Dependency Injection - Dependency Lookup loose coupling/maintainability/ late ...
- [CareerCup] 17.7 English Phrase Describe Integer 英文单词表示数字
17.7 Given any integer, print an English phrase that describes the integer (e.g., "One Thousand ...
- hdu Farm Irrigation
这题第一感觉是用搜索做,暴力就可以解决,这里将水管转换成一个个3*3的矩阵,然后搜素就可以了.写完之后确实一遍过掉了,31ms.附上代码: #include"iostream" # ...
- bzoj1832: [AHOI2008]聚会--LCA
本来觉得这是一道挺水的题目,后来觉得出题人挺变态的= = 半个小时敲完后,内存超限它给我看TLE,还是0ms,后来才发现内存限制64m 然后卡了一个小时后AC了.. 题目大意是在一棵树上找三点的最短路 ...
- 【HDU2196 Computer】经典树形dp
http://acm.hdu.edu.cn/showproblem.php?pid=2196 题意:有n台电脑相连,让你求每台电脑与离它最远的那台电脑的距离. 思路:两遍搜索即可,第一遍从上到下,第二 ...
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- CSS3部分新特性
1.旋转transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-moz-transform:rotate(30deg); /* ...
- HashMap实现原理分析
1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...