写一个图片轮播效果的Demo(自动播放)附代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/52916152

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js图片轮播切换</title>
    <style type="text/css">
        .imgCon {
            width: 450px;
            height: 300px;
            border: 2px solid #DCDCDC;
            margin: 100px auto;
            position: relative;
        }

        .imgCon span {
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 30px;
            background: #808080;
            text-align: center;
            font-size: 18px;
            line-height: 30px;
        }

        .numStyle {
            top: 0;
        }

        .textStyle {
            bottom: 0;
        }

        .imgCon strong {
            font-size: 30px;
            color: #000000;
            position: absolute;
            top: 50%;
            display: block;
            background: gray;
            cursor: pointer;
        }

        .imgCon .prev {
            left: 10px;
        }

        .imgCon .next {
            left: 425px;
        }

        img {
            width: 450px;
            height: 300px;
        }
    </style>
</head>
<body>
  
<div class="imgCon">
        <span id="numCon" class="numStyle">加载中...</span>
        <span id="textCon" class="textStyle">加载中...</span>
        <strong id="prev" class="prev"><</strong>
        <strong id="next" class="next">></strong>
        <img src="" id="imgChange" class="imgChange"/>
</div>
<script language="JavaScript" src="jquery-2.2.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var numCon = document.getElementById('numCon');
        var textCon = document.getElementById('textCon');
        var imgChange = document.getElementById('imgChange');
        var imgArr = ['img/ad1.jpg', 'img/ad2.jpg', 'img/ad3.jpg', 'img/ad4.jpg'];
        var imgText = ['第一张', '第二张', '第三张', '第四张'];
        var num = 0;
        //数字 图片变化函数
        function imgTab() {
            numCon.innerHTML = num + 1 + '/' + imgArr.length; //数字变化
            textCon.innerHTML = imgText[num]; //底部文字内容变化
            imgChange.src = imgArr[num]; //图片变化
        }

        function nextPage() {
            num++;
            if (num == imgArr.length) {
                num = 0;
            }
            imgTab();
        }

        var t;
        t = window.setInterval(nextPage, 1000);
        $("html").click(function (e) {
            //alert(e.target);
            if (e.target == $("#prev")[0]) {
                window.clearInterval(t);
                num--;
                if (num == -1) {
                    num = imgArr.length - 1;
                }
                imgTab();
                t = window.setInterval(nextPage, 1000);
            }
            else if (e.target == $("#next")[0]) {
                window.clearInterval(t);
                num++;
                if (num == imgArr.length) {
                    num = 0;
                }
                imgTab();
                t = window.setInterval(nextPage, 1000);
            }
        });
    });
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帘卷西风的专栏

cocos2dx用checkbox实现单选框和button实现table按钮

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

11010
来自专栏LinXunFeng的专栏

iOS - Swift UISearchController仿微信搜索框

40630
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

25130
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

29760
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

36260
来自专栏柠檬先生

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG   兼容性: IE 8~11 Ed...

25060
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

37790
来自专栏IMWeb前端团队

重构不完全教程集之一

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《...

23350
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

23380
来自专栏Android干货

浅谈GridLayout(网格布局)

44990

扫码关注云+社区

领取腾讯云代金券