今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

</head>

<style>

    .oop_inner{

        margin:0 auto;

        position:relative;

        top:10px;

        width:640px;

        height:424px;

        box-shadow:1px 2px 3px #666;

        overflow:hidden;

    }

    .oop_banner{

        position:absolute;

        width:2600px;

        /* left:-640px; */

    }

    .oop_banner img{

        float:left;

        width:640px;

    }

    .oop_li{

        position:absolute;

        left:45%;

        bottom:20px;

    }

    .oop_li span{

        display:block;

        float:left;

        margin-right: 10px;

        width:15px;

        height:7px;

        background:#fff;

        box-shadow: 1px 1px;

        cursor:pointer;

    }

    .oop_li span:hover{

        background:#000;

    }

    .oop_li .on{

        background:#000;

    }

    .oop_inner a{

        position:absolute;

        display: block;

        width:40px;

        height:40px;

        line-height:36px;

        box-shadow: 0px 0px 3px 2px;

        color:#fff;

        top:45%;

        text-align:center;

        font-size:40px;

        text-decoration:none;

    }

    .oop_inner a:hover{

        box-shadow: 0px 0px 3px 2px #000;

    }

    .oop_inner .last{

        left:15px;

    }

    .oop_inner .next{

        right:15px;

    }

</style>

<body>

    <div class="oop_inner">

        <div class="oop_banner">

            <img src="1.jpg" alt="">

            <img src="2.jpg" alt="">

            <img src="3.jpg" alt="">

            <img src="4.jpg" alt="">

        </div>

        <div class="oop_li">

            <span index="0" class="on"></span>

            <span index="1"></span>

            <span index="2"></span>

            <span index="3"></span>

        </div>

        <a href="javascript:void(0);" class="last">&lt;</a>

        <a href="javascript:void(0);" class="next">&gt;</a>

    </div>

</body>

<script src="../jquery-1.7.2.min.js"></script>

</html>

<script>

    $(function(){

        start();

        //定时开始

        var i = 0;

        function start(){

            banner = setInterval(function(){

                i+=1;

                if(i == 4){

                    i =0;

                }

                onclass();

                var le = i* -640;

                $('.oop_banner').animate({left:le});

            },2000);

        }

        //定时停止

        function stop(){

            clearInterval(banner);

        }

        //选中样式

        function onclass(){

            $('.oop_li>span').each(function(e){

                if(e == i){

                    $(this).addClass('on');

                }else{

                    $(this).removeClass('on');

                }

            })

        }

        //点击按钮

        $('.oop_li>span').click(function(){

            $('.oop_li>span').removeClass('on');

            $(this).addClass('on');

            var le = $(this).attr('index') * -640;

            $('.oop_banner').animate({left:le});

            i =  parseInt($(this).attr('index'));

        })

        //鼠标滑入

        $('.oop_inner').mouseenter(function(){

            stop();

        })

        //鼠标滑出

        $('.oop_inner').mouseleave(function(){

            start();

        })

        //下一个

        $('.next').click(function(){

            i+=1;

            if(i == 4){

                i = 0;

            }

            onclass();

            var le = i* -640;

            $('.oop_banner').animate({left:le});

        })

        //上一个

        $('.last').click(function(){

            i-=1;

            if(i == -1){

                i = 3;

            }

            onclass();

            var le = i* -640;

            $('.oop_banner').animate({left:le});

        })

    })

</script>

jquery实现漂亮的轮播图的更多相关文章

  1. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  2. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

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

  3. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  4. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  5. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  6. 前端框架之jQuery（二）----轮播图,放大镜

    事件 页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.   $(document).ready(function(){}) -----------> ...

  7. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  8. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  9. jQuery实际案例②——三层轮播图

    1.如图,这种轮播图需要实现的是,当鼠标移到2上时,第二张图片从右侧过来 2.需要注意的:①很明显这是通过改变z-index与left值来实现的:  ②整体布局需注意,图与数值(1,2,3,4,5)两 ...

随机推荐

  1. String和StringBuffer有什么区别

    首先,String和StringBuffer主要有2个区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringB ...

  2. IEC62304-2006解读

    IEC62304强调医疗软件在明确和满足其预期用途的前提下,不能引发不可接受的风险 62304提供一个医疗软件开发的框架,并指出框架下每个过程的要求,62304将过程分解为若干活动,活动分解为若干任务 ...

  3. 星空灯改装成USB供电

    简单的手工活,20分钟搞定 1.用一根USB线剪断,将红黑两根线分别连接到星空灯电源供电的正负极 2.由于USB输出5V 0.5A的电流,因此需要改装下,办法一,加电阻,办法二,换灯泡,由于小电阻并不 ...

  4. vue知识点之day5

    vuex是解决多层父子关系传值的问题,减少了传值的复杂度 vue+webpack安装图示

  5. Pig集群安装

    1.安装hadoop 这个之前已经写过 2.下载Pig,解压 3.保证Java和Hadoop已经在/etc/profile中配置 4.配置Pig安装目录 export PIG_INSTALL=/hom ...

  6. 产品从生到死的N宗罪

    写在前面 昨天晚上做了一个梦,大概就是跟CTO,PM在说着什么..现在回想起好像就是说产品怎么怎么的..:索性就吐槽下这几个项目生与死的N宗罪吧.. 特别提示: 本文为全方位吐槽型,前方多处具有针对性 ...

  7. 卸载Sharepoint2016后。重新安装提示 系统从以前的安装重新启动，或更新正在等待错误

    卸载Sharepoint2016 重启N遍,不停地重启.需要删除注册表项 下的 .将PendingFileRenameOperations键项删除,再重新安装就可以安装成功.

  8. chchc

    ---恢复内容开始--- 51CTO博客-原创IT文章分享平台 Logo 首页 文章 专家 专家博客 博客之星 推荐博客 我的博客 网站导航 学院 博客 下载 家园 论坛 CTO训练营 WOT 51C ...

  9. 等待事件P1 P2 P3含义

    从以下两个视图中查到的session中,有P1,P2,P3参数select * from v$sessionselect * from v$session_waitselect * from v$se ...

  10. 荣禄[róng lù]

    荣禄[róng lù] 百科名片 荣禄 荣禄(1836年4月6日-1903年4月11日)清末大臣,晚清政治家.字仲华,号略园,瓜尔佳氏,满洲正白旗人,出身于世代军官家庭,以荫生晋工部员外郎,后任内务府 ...