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

代码如下：

<!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. Python爬虫教程-01-爬虫介绍

    Spider-01-爬虫介绍 Python 爬虫的知识量不是特别大,但是需要不停和网页打交道,每个网页情况都有所差异,所以对应变能力有些要求 爬虫准备工作 参考资料 精通Python爬虫框架Scrap ...

  2. 【tips】编译epic异常解决

    目标:编译 epic 异常信息一: No CMAKE_C_COMPILER could be found.  No CMAKE_CXX_COMPILER could be found.   解决方法: ...

  3. c# datarow[] 转换成 datatable， List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  4. 为exchange 2010 owa 添加验证码

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

  5. Ubuntu18.04 vmware环境下配置静态ip

    各种linux系统发行版本配置静态ip方法各不相同,dhcp获取的话ip可能会变动,如果用xshell等工具连接的时候还要改ip,很是麻烦: 参考了网上各种配置Ubuntu18.04配置静态ip的方法 ...

  6. Mint-ui 中 Popup 作为组件引入，控制弹出框的显示与隐藏遇到的问题。

    Popup组件的结构: <template>   <div>   <!--分享弹出窗 begin-->     <mt-popup class="s ...

  7. pip-修改为国内镜像源

    pip 常用命令 pip install ./downloads/SomePackage-1.0.4.tar.gz pip install http://my.package.repo/SomePac ...

  8. UVa 1639 - Candy（数学期望 + 精度处理）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. BZOJ3697:采药人的路径(点分治)

    Description 采药人的药田是一个树状结构,每条路径上都种植着同种药材. 采药人以自己对药材独到的见解,对每种药材进行了分类.大致分为两类,一种是阴性的,一种是阳性的. 采药人每天都要进行采药 ...

  10. webpack中Entry与Output的基础配置

    entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...