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 Server数据库远程操作
SQL Server数据库远程操作中,在使用openrowset/opendatasource前首先要启用Ad Hoc Distributed Queries服务,因为这个服务不安全所以SqlServ ...
- 一.Linq to JSON是用来干什么的?
Linq to JSON是用来操作JSON对象的.可以用于快速查询,修改和创建JSON对象.当JSON对象内容比较复杂,而我们仅仅需要其中的一小部分数据时,可以考虑使用Linq to JSON来读取和 ...
- (原创) C# List 找 Max 的 Index
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【IOS学习基础】归档和解档
一.归档介绍 1.归档是指用某种格式来保存一个或多个对象,以便以后还原这些对象的过程.归档是将数据持久化的一种方式(所谓数据持久化,就是指在IOS开发过程中,将数据保存到本地,能够让程序的运行更加流畅 ...
- su普通用户切换root用户失败
http://blog.itpub.net/26432034/viewspace-1688391/ http://blog.csdn.net/zhangdaiscott/article/details ...
- opals 开发记录
1:开发需要的文件 下载地址:http://www.geo.tuwien.ac.at/opals/html/index.html 注意只能在release下才能通过. 我自己整理好的(64位的),以备 ...
- 【Lucene4.8教程之六】QueryParser与Query子类：如何生成Query对象
一.概述 1.对于一个搜索而言,其核心语句为: searcher.search(query, 10); 此时,其最重要的参数为一个Qeury对象.构造一个Query对象有2种方法: (1)使用Quer ...
- PC远程调试移动设备(转载)
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题--调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools.Firebug,即便是老版本的 IE ,我们也可以安装微 ...
- Spring的IOC注解学习
先引入jar包,common-annotations.jar 接着上代码: 1.dao接口 package com.dao; public interface OkpDao { public void ...
- PHP中的错误处理
程序只要在运行,就免不了会出现错误!或早或晚,只是时间问题罢了. 错误很常见,比如Notice,Warning等等.此时一般使用set_error_handler来处理: <?php set_e ...