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的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- C# Winform中执行post操作并获取返回的XML类型的数据
/// <summary> /// 返回指定日期的订单数据 /// </summary> /// <param name="StartDate"> ...
- CodeForces 501B - Misha and Changing Handles
有N个改名的动作,输出改完名的最终结果. 拿map做映射 #include <iostream> #include <map> #include <string> ...
- 类 的继承性（Inherits）与 重写（Overrides）
(类) 与 (结构) 类似,让我们可以定义并封装成一组相关项的数据类型.比如封装成结构,那么这个封装包的数据类型就为值类型:如封装成类,那么这个封装包的数据类型就为引用类型. 然而与结构的一个重要区别 ...
- 设计模式之桥接模式(Bridge)--结构模型
1.意图 将抽象部分与它的实现部分分离,使它们可以独立地变化. 2.适用性 你不希望在抽象和它的实现部分之间有一个固定的绑定关系. 类的抽象与它的实现都应该可以通过子类的方式加以扩展. 抽象部分与实现 ...
- PO VO DAO DTO BO TO概念与区别
O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写.通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据.在O/R Mapping的世界里,有两 ...
- 【Tika基础教程之一】Tika基础教程
一.快速入门 1.Tika是一个用于文本解释的框架,其本身并不提供任何的库用于解释文本,而是调用各种各样的库,如POI,PDFBox等. 使用Tika,可以提取文件中的作者.标题.创建时间.正文等内容 ...
- 日志管理-将Log4net的配置配置到的独立文件中
转自:http://www.cnblogs.com/zfanlong1314/p/3662679.html使用log4net已经很久了.但从来没有详情了解log4的参数,及具体使用方法.看了周公的博客 ...
- webStorm 列编辑
webStorm可以像Sublime一样使用列编辑,只是区别在于webStorm只可以编辑连续列表. 按住alt键鼠标选择一列,然后输入文字就会编辑多行,这个功能很赞,比较实用
- 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）
hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...
- python针对于mysql的增删改查
无论是BS还是CS得项目,没有数据库是不行的. 本文是对python对mysql的操作的总结.适合有一定基础的开发者,最好是按部就班学习的人阅读.因为我认为人生不能永远都是从零开始,那简直就是灾难. ...