效果图：

　　

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. 在web-inf外面 使用的是绝对路径进行访问 “/”表示访问文件夹 一层一层方式 我们在windos下访问文件夹也是一层一层的访问

  2. VS Code 编辑器

    使用VS Code 编辑器有一段时间了,感觉非常好用,已经成为了我的第一选择了.现在需要学习了一下了. 1,更改编辑器的默认设置 文件 =>首选项 => 设置 或 ctrl + ,(逗号) ...

  3. Ubuntu下安装tomcat

    下面记录了Ubuntu 16.04下安装Tomcat 8.5.9的过程步骤. 1.到官网下载tomcat8.5.9,选择格式为tar.gz.2.通过ftp将下载的tomcat8.5.9压缩包上传到ub ...

  4. JarvisOJ Misc 炫酷的战队logo

    欣赏过了实验室logo,有人觉得我们战队logo直接盗图比较丑,于是我就重新设计了一个,大家再欣赏下? 一开始拿到的BMP文件就打不开,用010打开发现文件头被抹去了,补上了BMP,与文件大小后,发现 ...

  5. Java自定义线程池-记录每个线程执行耗时

    ThreadPoolExecutor是可扩展的,其提供了几个可在子类化中改写的方法,如下: protected void beforeExecute(Thread t, Runnable r) { } ...

  6. shelve 模块

    shelve 模块概述:   shelve是python的自带model.   可以直接通过import shelve来引用.   shelve类似于一个存储持久化对象的持久化字典,即字典文件.   ...

  7. Codeforces300 F. A Heap of Heaps

    Codeforces题号:#300F 出处: Codeforces 主要算法:树状数组/线段树 难度:4.6 思路分析: 在没看到数据范围之前真是喜出望外,直到发现O(n^2)会被卡…… 其实也不是特 ...

  8. 【BZOJ5197】Gambling Guide （最短路，期望）

    [BZOJ5197]Gambling Guide (最短路,期望) 题面 BZOJ权限题 洛谷 题解 假设我们求出了每个点的期望,那么对于一个点,只有向期望更小的点移动的时候才会更新答案. 即转移是: ...

  9. 152. Maximum Product Subarray 以及 讨论【最大连续子序列】

    题目大意: 连续最大子段积 题目思路: 最大值只能产生在一个正数x一个正数,一个负数乘一个负数,所以维护两个值,一个区间最大值,一个最小值 其他的话: 在讨论这个问题之前,我先来说一说大一刚开学就学了 ...

  10. hdu 1160 FatMouse's Speed (最长上升子序列+打印路径)

    Problem Description FatMouse believes that the fatter a mouse is, the faster it runs. To disprove th ...