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的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- 基于实际项目的SQL学习总结
青云 随笔 - 2, 文章 - 0, 评论 - 1, 引用 - 0 一个项目涉及到的50个Sql语句(整理版) /* 标题:一个项目涉及到的50个Sql语句(整理版) 说明:以下五十个语句都按照测 ...
- Mysql优化之创建高性能索引(二)
1.索引的优点 索引可以让服务器快速地定位到表的指定位置.总结下来有三大优点: 索引大大减少了服务器需要扫描的数据量 索引可以帮助服务器避免排序和临时表 索引可以将随机I/O变为顺序I/O 2.高性能 ...
- 创建文件夹并解决解决unicode和ASCII码转换的问题
# -*- coding: UTF-8 -*-import sysimport timeimport os #解决unicode和ASCII码转换的问题reload(sys) #解决unicode和A ...
- windows 激活远程桌面服务
- java学习：AWT组件和事件处理的笔记(1)--文本框上的ActionEvent事件
学习处理事件时,必须很好的掌握事件源,监视器,处理事件的接口 1.事件源 能够产生java认可事件的对象都可称为事件源,也就是说事件源必须是对象 2.监视器 监 ...
- Ubuntu安装与初始配置
转载请注明作者:梦里风林 更多文章查看我的个人站: ahangchen.site 适用于Ubuntu版本 14.04/16.04LTS 64位 先上图 双系统安装 划分空闲磁盘,U盘安装ubuntu ...
- Nginx 配置指令的执行顺序（八）
前面我们详细讨论了 rewrite.access 和 content 这三个最为常见的 Nginx 请求处理阶段,在此过程中,也顺便介绍了运行在这三个阶段的众多 Nginx 模块及其配置指令.同时可以 ...
- IE9 "CSS 因 Mime 类型不匹配而被忽略“问题
写页面的时候在chrome,fireforks等页面上显示正常,但是换成IE9之后就完全没有样式了.IE真是个奇葩的怪胎.它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘,也就是说所有的.c ...
- hdu 1010 Tempter of the Bone 深搜+剪枝
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- UML_静态图
类图 类图是描述类,接口,协作以及它们之间关系的图,用来显示系统中各个类的静态结构.类图是定义其他图的基础,在类图的基础上,可以使用状态图,协作图,组件图和配置图等进一步描述系统其他方面 ...