jquery实现带左右箭头和数字焦点的图片轮播手写代码
以前图片轮播经常用网上的插件，然后想说自己也要认真看看，一步一步弄明白，所以就自己研究写了个图片轮播的代码，我自己觉得还算是挺简单的。如有改进的地方，欢迎你能帮我指出，共同进步。
（ps：博客园如何上传代码就是可以供大家下载那种，一直没找到地方！）
html：
<html>
<body>
<div class="main">
<div class="myslide">
<ul class="myslidetwo">
<li><img src="img/dn.jpg"/></li>
<li> <img src="img/ey.jpg"/></li>
<li><img src="img/fxh.jpg"/></li>
<li><img src="img/ss.jpg"/></li>
</ul>
<p class="arrows">
<a class="pre"><</a>
<a class="next">></a>
</p>
<ol class="label">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</div>
</body>
</html>
css：
<style>
body {
background-color: #dddddd;
}
* {
margin: 0px; padding: 0px;list-style: none;
}
a{
cursor: pointer;
}
.main {
position: relative;
width: 500px; height: 350px;margin:40px auto;
}
.myslide {
float: left; position: absolute; overflow: hidden;
width: 500px; height: 350px;
}
.myslidetwo {
position: absolute;
overflow: hidden;
width: 2000px;
}
.myslidetwo img {
float: left; width: 500px; height: 350px;
}
.label{
position: absolute;
bottom: 15px;
left: 210px;
width: 200px;
}
.label li {
float: left;
width:20px;height:20px;line-height:20px;text-align: center;
margin-right: 5px;
border:1px solid #ddd;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.label li.current {
background: #0f0;
}
.arrows{
position: absolute;
left:0px; top:120px;
color:#666; font-size: 40px;font-weight: bold;
}
.arrows a{
background: rgba(0,0,0,0.2);
display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;
}
.arrows a:hover{
color:#fff;
}
.arrows .pre{
margin-right: 420px;
}
</style>
jquey：
<script>
$(document).ready(function () {
var _now=0;
var oul = $(".myslidetwo");
var numl = $(".label li");
var wid = $(".myslide").eq(0).width();
//数字图标实现
numl.click(function () {
var index = $(this).index();
$(this).addClass("current").siblings().removeClass();
oul.animate({'left': -wid * index}, 500);
})
//左右箭头轮播
$(".pre").click(function () {
if (_now>=1) _now--;
else _now=3;
ani();
});
$(".next").click(function () {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
});
//动画函数
function ani(){
numl.eq(_now).addClass("current").siblings().removeClass();
oul.animate({'left': -wid * _now}, 500);
}
//以下代码如果不需要自动轮播可删除
//自动动画
var _interval=setInterval(showTime,2000);
function showTime() {
if (_now == numl.size() - 1) {
_now = 0;
}
else _now++;
ani();
}
//鼠标停留在画面时停止自动动画，离开恢复
$(".myslide").mouseover(function(){
clearTimeout(_interval);
});
$(".myslide").mouseout(function(){
_interval=setInterval(showTime,2000);
});
});
</script>
jquery实现带左右箭头和数字焦点的图片轮播手写代码的更多相关文章
- 用jquery实现图片轮播
用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- python基础之 list和 tuple(元组)
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...
- N - Robot Motion(第二季水）
Description A robot has been programmed to follow the instructions in its path. Instructions for the ...
- WebView高危接口安全检测
高危]WebView高危接口安全检测共2处详细内容:在Android系统4.3.1~3.0版本,系统webview默认添加了searchBoxJavaBridge_接口,如果未移除该接口可能导致低版本 ...
- MySQL计数器表的设计
如果应用在表中保存计数器,则在更新计数器时可能碰到并发问题.计数器表在web应用中非常常见.可以用这个表缓存一个用户的朋友书.文件下载次数等.创建一张独立的表存储计数器是一种非常好的做法,这样可以使计 ...
- Python信息采集器使用轻量级关系型数据库SQLite
1,引言Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.SQLite作为后端数据库,可以搭配Python建网站,或者为python网络爬虫存储数据.SQLite还在其它 ...
- LaTeX中titlesec宏包的使用
在 xelatex 中使用 \usepackage 指令使用 titlesec 宏包时,可以指定一些格式选项,如下: \usepackage[center]{titlesec} 其中 center 可 ...
- 变态最大值--nyoj题目811
变态最大值 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解 ...
- 映射 SQL 和 Java 类型
http://alex2009.blog.51cto.com/749524/272942 AJAX: http://www.w3school.com.cn/jquery/ajax_ajax.asp h ...
- try/catch异常捕捉
StringWriter sw = new StringWriter(); e.printStackTrace(new PrintWriter(sw)); System.out.println(sw. ...
- android客户端从服务器端获取json数据并解析的实现代码（重要）
首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的URL中获取数组 * @param urlPath * @return * @throws Exc ...