效果图：

　　

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. python时间模块time

    时间模块 时间模块主要处理和时间相关的事件,我们可以通过模块获取不同数据类型的时间以便我们需求. 表现时间的三种方式: 在pythn中表现时间的方式主要有三种:时间戳(stamptime).元祖时间( ...

  2. kubernetes 每个node上只能运行一个副本DaemonSet

    每个node上只能运行一个副本: apiVersion: extensions/v1beta1 kind: DaemonSet #使用DaemonSet的方式运行 metadata: name: ku ...

  3. BZOJ3638[Codeforces280D]k-Maximum Subsequence Sum&BZOJ3272Zgg吃东西&BZOJ3267KC采花——模拟费用流+线段树

    题目描述 给一列数,要求支持操作: 1.修改某个数的值 2.读入l,r,k,询问在[l,r]内选不相交的不超过k个子段,最大的和是多少. 输入 The first line contains inte ...

  4. Appium+python+html生成饼图测试报告

    历时三周这个小框架终于正式运行了,git源码地址;https://github.com/jiyanjiao/AutoTEST/tree/master/qingqi_driver_app 报告如图:

  5. bzoj 2054: 疯狂的馒头(线段树||并查集）

    链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2054 线段树写法: 点的颜色只取决于最后一次染的颜色,所以我们可以倒着维护,如果当前区间之前 ...

  6. mysql 0x80004005 unable to connect to any of the specified mysql hosts

    语言:c# 问题:偶尔会出现连不上mysql 报标题的这个错误. 解决方法:把server = localhost 改为 =127.0.0.1 或者静态IP  ,按着改暂时没出现了,继续观望!

  7. 简单聊聊WebSocket

    一.概述 上一篇文章<浅析一次HTTP请求>我们分析了简单的一次 HTTP 请求具体是怎么样完成的,分析了 HTTP 协议的数据结构,如何连接,如何断开,又是如何多路复用的,那么今天我们来 ...

  8. Android平台如何获得屏幕尺寸？

    本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术,本文为大家讲解在Android平台上如何获得屏幕 ...

  9. bzoj3514(LCT+主席树)

    题目描述 N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 题解 对于一个截止时间来说,越晚的变越好. 所以我们可以维护一颗以边的序号为关键字的最大生成树,然后用主席树维 ...

  10. NOIP2012疫情控制(二分答案+树上贪心)

    H 国有n个城市,这 n个城市用n-1条双向道路相互连通构成一棵树,1号城市是首都,也是树中的根节点. H国的首都爆发了一种危害性极高的传染病.当局为了控制疫情,不让疫情扩散到边境城市(叶子节点所表示 ...