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

（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. Visual Studio 使用技巧

    整理备用: 1. 键入prop后,连续按两下tab,  可以自动生成属性,然后输入类型和名称. 类似的还有: propg, 生成private set的属性 propfull,生成私有字段,和相应属性 ...

  2. ‘Microsoft.Jet.OLEDB.4.0’ provider is not registered

    正如以下msdn论坛所述,Microsoft.Jet.OLEDB.4.0只有32bit,所以我们必须compile application to x86 platform. http://social ...

  3. C#面试题总结——程序设计基础

    一.类型与变量 1.C#支持哪几个预定义的值类型? 主要包括五个类型:整数,浮点数,字符型,bool类型以及decimal型(小数型).其中每一个类型分别有多个内置类型组成. 2.C#支持哪几个预定义 ...

  4. jdbc select

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  5. codeforces #332 div2

    A. #include<cstdio> #include<algorithm> #include<cmath> #include<map> #inclu ...

  6. 设定MS SQL Server 2008定期自动备份

    1.说明 SQL Server2008 本身具有定期自动备份功能,我们只需要通过简单的配置就可以实现非常简单高效的自动备份功能. 2.打开SQL Server代理服务 要实现自动备份功能,首先要保证S ...

  7. Notepad++编译c++时使用的代码

    cmd /c "g++ -o $(CURRENT_DIRECTORY)\$(NAME_PART).exe $(FULL_CURRENT_PATH)" 出现控制台.  NppExec ...

  8. ComboGrid 行内点击编辑内容

    最近easyui需要在行内编辑选中项,但是编辑的内容出了当前选中列值,还有其他的,比较麻烦, 先看下这段代码 columns: [[ { field: 'GuestID', title: '编号', ...

  9. A Survey of Dynamic Spectrum Access

    这是2007年IEEE Signal Process 杂志上的一篇文章.综述DSA的.正如文章最后所说,DSA/OSA(Opportunity Spectrum Access)还处于襁褓期,在技术.政 ...

  10. 杭电oj 2037 今年暑假不AC

    Tips:贪心算法的典型应用,可以按照节目结束时间由小到大排序,(至于结束时间相同的,有些人说按开始时间早的排序,不过个人认为不必处理,因为结束时间一样,两个之中要么都没有,要么必有一个)然后再依次进 ...