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

代码如下：

<!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. 启用代理导致 有道云笔记未知错误、网络错误和OneDrive断线

    最近有道云笔记和OneDrive时不时的连接不上服务器,不知道什么原因?后来到有道官网上看了下,才发现,和IE浏览器的设置有关系: 我本地因为之前设置了代理,然后自己忘记了,代理的软件没开,导致IE上 ...

  2. Java容器之HashMap源码分析

    在java的容器框架中,hashMap是最常用的容器之一,下面我们就来深入了解下它的数据结构和实现原理 先看下HashMap的继承结构图 下面针对各个实现类的特点进行下说明:1)HashMap: 它是 ...

  3. Git访问TFS出现权限不足（Using Personal Access Tokens to access Visual Studio Online）

    使用GIT克隆TFS服务器上的代码到本地时出现错误如下: fatal: Authentication failed for 'https://***.visualstudio.com/***Proje ...

  4. Android开发精彩博文收藏——UI界面类

    本文收集整理Android开发中关于UI界面的相关精华博文,共大家参考!本文不定期更新! 1. Android使用Fragment来实现TabHost的功能(解决切换Fragment状态不保存)以及各 ...

  5. bmp制作自定义字体（cocostudio使用）

    工具需求:bmpfont 1.步骤 (1)制作 * 把自己的字体放到一个txt文件中,写个脚本抽离出来, 重复了没有关系 * Edit->Select chars from fils(注意:Ed ...

  6. (MUA)mutt-"No authenticators available" 发送不出去邮件

    问题: 使用mutt发送邮件的时候,在调试模式下总是显示"No authenticators available", 后来在google上查到可能要设置验证方法gssapi,但是设 ...

  7. 软工团队 - 预则立&&他山之石

    软工团队 - 预则立&&他山之石 团队任务计划 时间 人员 任务 10.23-10.29 张昭锡 初拟Android代码规范 李永盛 初拟PHP代码规范 刘晨瑶 初拟Git代码规范 刘 ...

  8. SQLAlchemy总结

    SQL相关操作 创建一个test库 create database test; 授权一个用户 grant all privileges on *.* to 'yangjian'@'%' identif ...

  9. wireshark：no interface can be used for capturing in this system with the current configuration

    在虚拟机unbuntu中,进行wireshark抓包,出现:no interface can be used for capturing in this system with the current ...

  10. 【[HAOI2012]高速公路】

    披着期望外衣的数据结构? 非常毒瘤 我们要求得期望其实就是 \[\frac{\sum_{i=l}^{r}\sum_{j=i+1}^{r}dis(i,j)}{\binom{r-l+1}{2}}\] 好像 ...