【实践】纯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 ...
随机推荐
- #define is unsafe——I
I. #define is unsafe Have you used #define in C/C++ code like the code below? #include <stdio.h&g ...
- spring mvc 拦截器 拦截子目录
项目中碰到这一个问题: 对于/user/loginpage,/user/login这一类的url,放行: 对于/user/{userId}/xxx(xxx不为空)的操作,需要拦截,url-patter ...
- ubuntu安装配置jdk tomcat mysql ...
安装之前大家一定要检查好各个版本问题 以免造成不兼容. (一)下载所需安装包: jdk-7u76-linux-x64.tar.gz apache-tomcat-7.0.63.tar.gz MySQL- ...
- oracle 字符乱码问题解决方案
今天在客户服务器上遇到了oracle中文乱码问题,第一个想到的是:要想避免oracle字符乱码的问题,需要注意oracle客户端的字符编码和服务端的字符编码保持一致. 于是操作如下: 1.查看服务端字 ...
- iOS -- AVAudioPlayer播放音乐
一. AVAudioPlayer: 声明音乐控件AVAudioPlayer,必须声明为全局属性变量,否则可能不会播放,AVAudioPlayer只能播 ...
- PropertiesUtil.java
package com.vcredit.ddcash.batch.util; import java.io.BufferedReader;import java.io.File;import java ...
- 将gridFS中的图片文件写入硬盘
开启用户验证下的gridfs 连接使用,在执行脚本前可以在python shell中 from pymongo import Connectionfrom gridfs import *con = C ...
- Struts2的流程（三）
Struts的流程图如下(需要完全理解):
- MVC Pager 使用
MVC Pager 4.0+ 3.0版本使用 ,直接来点使用的.一看就明白 @Ajax.Pager(Model,pagerOptions,mvcAjaxOptions); @using W ...
- Windows下mock环境搭建-加速项目Api开发
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 公司进行技术部拆分,以项目制作为新的开发模式,前端+移动端+后端,于是加速Api开发变得很有必要,准 ...