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

代码如下：

<!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. 基于Vue的WebApp项目开发（五）

    实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...

  2. mac下 IDEA 的pom下 出现 Cannot access in offline mode 问题

    在mac下 配置完maven后发现总是不能引入最新的jar包,google了好久总算找到解决办法: 默认带有work offline ,不清楚这个是干嘛用的.勾选掉 了就行了.

  3. Google Developers 中国网站正式发布

    Google Developers 中国网站 (developers.google.cn) 正式发布!Google Developers 中国网站是特别为中国开发者而建立的,它汇集了 Google 为 ...

  4. js中问号

    是三目运算,如:(a==b)?a:b 也就是说,先判断a是否等于b,如果是(true),那么返回a,如果否(false),则返回b greeting=(visitor=="PRES" ...

  5. DAO层，Service层，Controller层、View层介绍

    来自:http://jonsion.javaeye.com/blog/592335 DAO层 DAO 层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DA ...

  6. 为exchange 2010 owa 添加验证码

    微软给了exchange owa页面加固的方案,如有需要,请查看. https://partnersupport.microsoft.com/zh-hans/par_servplat/forum/pa ...

  7. Python学习---django重点之视图函数

    django重点之视图函数 http请求中产生两个核心对象: http请求:HttpRequest对象,由Django自己创建 http响应:HttpResponse对象,由开发自己创建,必须返回一个 ...

  8. Python学习---生成器的学习1210

    在Python中,这种一边循环一边计算的机制,称为生成器: 结论: 生成器本质是一个函数,不同于函数的是它生成的是一个对象,不执行函数内的代码 1.1. 列表生成器 列表生成器: 列表是直接生成数字在 ...

  9. [日常] NOIp 2018 滚粗记

    考试前预感到自己会滚大粗 然后发现确实滚了个大粗 ==== €€£ WARNING ==== 因为是后补的所以更新速度比较慢 最后决定把半成品扔出来 预计本周末放假会更完吧 2019.2.25 upd ...

  10. （转）Win10下PostgreSQL10与PostGIS安装

    版权声明:本文为博主原创文章,欢迎转载. https://blog.csdn.net/LWJ285149763/article/details/79380643 最近在使用矢量数据,因此需要用空间数据 ...