以前图片轮播经常用网上的插件，然后想说自己也要认真看看，一步一步弄明白，所以就自己研究写了个图片轮播的代码，我自己觉得还算是挺简单的。如有改进的地方，欢迎你能帮我指出，共同进步。

（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实现带左右箭头和数字焦点的图片轮播手写代码的更多相关文章

  1. 用jquery实现图片轮播

    用jquery简单实现图片轮播效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  3. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  5. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  7. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

随机推荐

  1. ios 项目被拒绝各种理由

    . Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...

  2. 单光纤udp通信

    环境:      两块板子,拥有独立系统(Linux),通过单光纤连接(数据只能单向发送,无反馈).两块板子采用udp协议通信. 问题: 发送板子发送数据后,接收板子上的进程收不到数据. 确认两块光纤 ...

  3. css多行文本居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. AlertDialog与DialogFragment

    1.AlertDialog 作用:简单的弹出框实现 创建方法: AlertDialog alert = new AlertDialog.Builder(); 使用: new AlertDialog.B ...

  5. MVC4商城项目一：框架设计

    代码已托管在  https://code.csdn.net/denghao156/ktnmb_mvc4 先上图,设计模式参考:ddmvc4.codeplex.com 一.unintofwork  设计 ...

  6. SQL Server dbcc shrinkfile 不起作用

    方法 1.重建聚集索引. 方法 2.重建堆表. ---------------------------------------------------------------------------- ...

  7. listvew加载更多

    http://bbs.51cto.com/thread-968277-1.html 又是新的一周的开始,上午自己写了上拉加载更多数据的demo,嘿嘿这里和大家分享.   android开发中,list ...

  8. QT:给Widget设置背景图片——设置Widget的调色板，调色板使用图片和背景色

    QT:给Widget设置背景图片 1 /*2 * set background image3 */4 QPixmap bgImages(":/images/bg.png");5 Q ...

  9. Mysql 利用multiline 实现多行匹配

    <pre name="code" class="html">input { file { type => "zj_mysql&quo ...

  10. 一个简单java爬虫爬取网页中邮箱并保存

    此代码为一十分简单网络爬虫,仅供娱乐之用. java代码如下: package tool; import java.io.BufferedReader; import java.io.File; im ...