效果图：

　　

GitHub地址：https://github.com/123456abcdefg/Javascript

大家可以下载源码查看。

与前一篇写的轮播图实现的效果一致，这个是用jQuery写的，相对简单一点的吧。

js代码：

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

    <script>

        var index = 1;

        var newLeft = 0;

        var interval;

        var buttSpan = $(".butt").children();

        function nextPage(next){

            $(buttSpan[index-1]).removeClass("on");

            if(next){

                if(index == 5){

                    index = 1;

                    newLeft = 0;

                }

                else{

                    index ++;

                    newLeft = -600*(index-1);

                }

            }

            else{

                if(index == 1){

                    index = 5;

                    newLeft = -2400;

                }

                else{

                    index --;

                    newLeft = -600*(index-1);

                }

            }

            $(".list").css("left",newLeft + 'px');

            $(buttSpan[index-1]).addClass("on");

        }

        function autoNextPage(){

            interval = setInterval(function(){

                nextPage(true);

            },"3000");

        }

        autoNextPage();

        $(".container").mouseover(function(){

            clearInterval(interval);

            $(".arrow").css("display","block");

        });

        $(".container").mouseout(function(){

            autoNextPage();

            $(".arrow").css("display","none");

        });

        $(".left").click(function(){

            nextPage(false);

        });

        $(".right").click(function(){

            nextPage(true);

        });

        function clickButt(){

            for(var i = 0;i<5;i++){

                $(buttSpan[i]).click(function(){

                    $(buttSpan[index-1]).removeClass("on");

                    index = $(this).attr("index")-1;

                    nextPage(true);

                });

            }

        }

        clickButt();

    </script>

　　

主要包括一下几个部分：

1.一个轮播的方法（left）：nextPage(next);

index , newLeft , left

2.自动轮播：autoNextPage();

3.鼠标放到container上图片及按钮不再播放

4.鼠标点击左右方向，可以向左/向右轮播。（调用nextPage()方法）

5.点击下面几个按钮，可以切换到相应的图片（index），并且按钮样式也相应改变。

这个是相对于上面较简单的另一种写法：

点击相应的按钮，按钮样式改变，其同胞元素恢复之前。

获取到当前index值，调用play(true)方法，按钮对应的图片改变。

完整代码：

<html>

<head>

<meta charset="utf-8" />

<title>1</title>

<style>

    *{

        padding:0;

        margin:0;

    }

    .container{

        width:600px;

        height:400px;

        overflow:hidden;

        position:relative;

        margin:0 auto;

    }

    .list{

        width:3000px;

        height:400px;

        position:absolute;

    }

    .list img{

        width:600px;

        height:400px;

        float:left;

    }

    .butt{

        width:300px;

        height:20px;

        position:absolute;

        left:230px;

        bottom:20px;

        cursor:pointer;

    }

    .butt span{

        width:20px;

        height:20px;

        display:inline-block;

        border:1px solid brown;

        border-radius:50%;

        color:brown;

        z-index:1;

        font-size:20px;

        font-weight:bold;

        text-align:center;

    }

    .arrow{

        width:30px;

        height:30px;

        position:absolute;

        top:200px;

        color:black;

        background-color:white;

        z-index:1;

        font-size:30px;

        font-weight:bold;

        text-align:center;

        text-decoration:none;

        display:none;

    }

    .left{

        left:10px;

    }

    .right{

        right:10px;

    }

    .on{

        background-color:black;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="list" style="left:0px;">

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

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

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

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

            <img src="../img/5.jpg"></img>

        </div>

        <div class="butt">

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

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

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

            <span index="4">4</span>

            <span index="5">5</span>

        </div>

        <a href="#" class="arrow left">&lt;</a>

        <a href="#" class="arrow right">&gt;</a>

    </div>

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

    <script>

        var index = 1;

        var newLeft = 0;

        var interval;

        var buttSpan = $(".butt").children();

        function nextPage(next){

            $(buttSpan[index-1]).removeClass("on");

            if(next){

                if(index == 5){

                    index = 1;

                    newLeft = 0;

                }

                else{

                    index ++;

                    newLeft = -600*(index-1);

                }

            }

            else{

                if(index == 1){

                    index = 5;

                    newLeft = -2400;

                }

                else{

                    index --;

                    newLeft = -600*(index-1);

                }

            }

            $(".list").css("left",newLeft + 'px');

            $(buttSpan[index-1]).addClass("on");

        }

        function autoNextPage(){

            interval = setInterval(function(){

                nextPage(true);

            },"3000");

        }

        autoNextPage();

        $(".container").mouseover(function(){

            clearInterval(interval);

            $(".arrow").css("display","block");

        });

        $(".container").mouseout(function(){

            autoNextPage();

            $(".arrow").css("display","none");

        });

        $(".left").click(function(){

            nextPage(false);

        });

        $(".right").click(function(){

            nextPage(true);

        });

        function clickButt(){

            for(var i = 0;i<5;i++){

                $(buttSpan[i]).click(function(){

                    $(buttSpan[index-1]).removeClass("on");

                    index = $(this).attr("index")-1;

                    nextPage(true);

                });

            }

        }

        clickButt();

    </script>

</body>

</html>

参考博客：https://www.cnblogs.com/lihuijuan/p/9486051.html

用jQuery写的轮播图的更多相关文章

  1. 记录一下自己用jQuery写的轮播图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

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

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

  6. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  7. 原生js写简单轮播图方式１－从左向右滑动

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...

  8. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  9. 用 JS 写 （轮播图 / 选项卡 / 滑动门）

    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...

随机推荐

  1. .net core 2.0 Autofac

    参考自 https://github.com/VictorTzeng/Zxw.Framework.NetCore 安装Autofac,在`project.csproj`加入 <PackageRe ...

  2. Volatile的应用

    .java 的执行过程 Java代码在编译后会变成Java字节码 字节码被类加载器加载到JVM里 JVM执行字节码,转化为汇编指令在CPU上执行 Java中所使用的并发机制依赖于JVM的实现和CPU的 ...

  3. MySql 主从同步 （库名不同）

    主库:192.168.1.250 从库:192.168.1.199 主库  my.ini # For advice on how to change settings please see # htt ...

  4. Android app下载并安装

    1  下载功能 //下载apk private void downloadApk(String apkUrl) throws PackageManager.NameNotFoundException ...

  5. P1164 小A点菜

    原题链接 https://www.luogu.org/problemnew/show/P1164 此题是一道简单的动规问题 才学两天不是很熟练,我苦思冥想看着题解终于想出来了. 主要的思路如下: 我们 ...

  6. 洛谷P1414又是毕业季二题解

    题目 思想: 首先这个题必定是一个数学题,肯定不是一个一个枚举得到解,这样肯定会T,所以我们就应该想一些别的方法,. 分析: 比如,答案,一定是递减的,因为该答案所满足的条件肯定是越来越苛刻的,所以我 ...

  7. 【XSY2767】朋友 广义后缀自动机 网络流

    题目描述 懒得写了...直接贴题面 $\sum n\leq5000,1\leq S_{i,j}\leq k\leq 1000 $ 题解 先建出广义sam. 可以发现朋友的出现位置的定义符合后缀自动机的 ...

  8. php+redis配置

    系统环境: win10+phpstudy+lamp 安装扩展 php5.6.4 =>下载地址:http://windows.php.net/downloads/pecl/releases/red ...

  9. Hdoj 2899.Strange fuction 题解

    Problem Description Now, here is a fuction: F(x) = 6 * x^7+8x^6+7x^3+5x^2-yx (0 <= x <=100) Ca ...

  10. java 子类强转父类 父类强转子类

    Java 继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. Java 子类强转父类 父类引用指向子类对象: jav ...