基于jQuery的图片左右轮播，基本原理通用
毕竟新人，写点基础的小东西，希望能和大家沟通交流，提高自己的水平。
这个是应用较多的轮播部分，希望能和大家分享一下思路，拓宽视野。
话不多说，上内容。
我的思路很简单就是通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery.min.js"></script>
<style>
.banner{
margin:0 auto;
border: 4px dashed black;
width:400px;
height:200px;
position: relative;
overflow:hidden;
}
.banner a{
z-index: 100;
display: block;
width:100%;
height: 100%;
position: absolute;
left:100%;
top:0;
}
.banner .first{
left:0;
}
.banner a img{
width:100%;
height: 100%;
}
.choose{
z-index: 1000;
position: absolute;
left:150px;
top:180px;
width:100px;
height: 10px;
}
.choose span{
margin-right: 15px;
float: left;
display:block;
background: blue;
width:10px;
height: 10px;
border-radius: 10px;
}
.choose span:hover{
background: red;
}
.choose .red{
background: red;
}
.banner .pre,.next{
cursor:pointer;
text-align:center;
border-radius:20px;
display:block;
background:#cccccc;
opacity:0.4;
text-decoration: none;
z-index: 200;
display:block;
width:40px;
height: 40px;
font-size: 40px;
color:red;
position: absolute;
top:80px;
}
.banner .pre{
left:0px
}
.banner .next{
right: 0px;
}
</style>
<body> <div class="banner">
<!--
这里为上一页下一页点击按钮
-->
<span class="pre">-</span>
<span class="next">+</span>
<!--
此处为轮播主体，颜色块代替。图片自加
-->
<a href="###" class="first" style="background: pink;"></a>
<a href="###" style="background: blue;"><img src="data:images/banner1.jpg"/></a>
<a href="###" style="background: greenyellow;"><img src="data:images/banner2.jpg"/></a>
<a href="###" style="background: deepskyblue;"><img src="data:images/banner3.jpg"/></a>
<!--
此处为轮播部分下方小点选择
-->
<div class="choose">
<span class="red"></span>
<span></span>
<span></span>
<span></span>
</div>
</div> <script>
/*定义两个变量，保存当前页码和上一页页码*/
var $index=0;
var $exdex=0;
/*小点的鼠标移入事件，触发图片左移还是右移*/
$(".choose span").mouseover(function(){
//获取当前移入的index值
$index=$(this).index();
//首先让点的颜色变化，表示选中
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
//判断如果index变小，证明图片要往左移动。变大则为右移
if($index>$exdex){
next();
}else if($index<$exdex){
pre();
}
//移动完毕将当前index值替换了前页index
return $exdex=$index;
});
//下一页的点击事件。在右移基础上加了最大index判断
$(".next").click(function(){
$index++;
if($index>3){
$index=0
}
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
next();
return $exdex=$index;
});
//上一页的点击事件
$(".pre").click(function(){
$index--;
if($index<0){
$index=3
};
$(".choose span").eq($index).addClass("red").siblings().
removeClass("red");
pre();
return $exdex=$index;
});
//加个定时器，正常轮播
var atime=setInterval(function(){
$(".next").click();
},1000);
//这里为右移和左移的事件函数。
//右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0
function next(){
$(".banner a").eq($index).stop(true,true).
css("left","100%").animate({"left":"0"});
$(".banner a").eq($exdex).stop(true,true).
css("left","0").animate({"left":"-100%"});
}
function pre(){
$(".banner a").eq($index).stop(true,true).
css("left","-100%").animate({"left":"0"});
$(".banner a").eq($exdex).stop(true,true).
css("left","0").animate({"left":"100%"});
}
</script>
</body>
</html>
希望大家指出问题，交流思路，让我们彼此思路能够更宽广。
致谢
基于jQuery的图片左右轮播，基本原理通用的更多相关文章
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery图片无缝轮播插件；
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
- 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
- Android中使用ImageViewSwitcher实现图片切换轮播导航效果
前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...
随机推荐
- 数据库ACID和CAP理论
1.ACID是RDBMS的理论基石: A原子(Atomiclty )事务原子性: C一致(Consistency)插入一张表数据,会 影响其它(索引/其它表)等一致. I ...
- dedecms 常用标签
都是常用的一些标签,大家可以用ctrl+F实现搜索. 网站名称:{dede:global.cfg_webname/} 网站根网址:{dede:global.cfg_basehost/} 网站根目录:{ ...
- Git学习资料
1.http://wuyuans.com/2012/05/github-simple-tutorial/ 2.http://www.ihref.com/read-16369.html
- UOJ#191. 【集训队互测2016】Unknown
题意:维护一个数列,每个元素是个二维向量,每次可以在后面加一个元素或者删除一个元素.给定P(x,y),询问对于[l,r]区间内的元素$S_i$,$S_i \times P$的最大值是多少. 首先简单地 ...
- 关于.net的一些基础知识(一)
一.GC工作原理: GC如其名,就是垃圾收集,当然这里仅就内存而言.Garbage Collector(垃圾收集器,在不至于混淆的情况下也成为GC)以应用程序的root为基础,遍历应用程序在Heap上 ...
- spring的有状态BEAN和无状态BEAN
有状态会话bean :每个用户有自己特有的一个实例,在用户的生存期内,bean保持了用户的信息,即“有状态”:一旦用户灭亡(调用结束或实例结束),bean的生命期也告结束.即每个用户最初都会得到一 ...
- QT下自定义QQ聊天窗口tab控件
1.用继承pushbutton派生类来实现tab按钮,里面加一个QPushbutton关闭按钮:(自定义类:CCustomTabButton) 2.多个tab按钮用QHboxLayout做容器: 3. ...
- 关于android应用--内存的优化
以下内容为转载自网上,然后自己加工贴合到一块的: 原文地址:http://www.cnblogs.com/frydsh/archive/2012/12/09/2810601.html http://w ...
- android开发之ExpandableListView的使用，实现类似QQ好友列表
由于工作需要,今天简单研究了一下ExpandableListView,做了一个类似QQ列表的Demo,和大家分享一下. 效果图如下: 先来看看主布局文件: <RelativeLayout xml ...
- VB学习笔记
stack segment stack 'stack' dw dup() ;此处输入堆栈段代码 stack ends data segment ;IBUF OBUF 看成是内存的地址,IBUF+1和I ...