<!DOCTYPE html>

<html>

<head>

    <title>

        滚动图片

    </title>

    <style type="text/css">

        .imageBox{

            height: 438px;

            width: 960px;

            overflow: hidden;

            position:relative;

            margin: auto;

        }

        .scrollContainer{

            width: 4800px;

            height: 438px;

            padding: 0px;

            position: absolute;

            top: 0px;

            left:0px;

        }

        .scrollImg{

            width: 960px;

            height: 435px;

        }

        .scrollContainer li{

            float: left;

            display: list-item;

        }

        .content{

            margin: auto;

        }

    </style>

    <meta charset="utf-8" />

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

</head>

<body>

    <div class="content">

        <div class="imageBox">

            <ul class="scrollContainer">

                <li>

                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />

                </li>

                <li>

                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_02.jpg" />

                </li>

                <li>

                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_03.jpg" />

                </li>

                <li>

                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_04.jpg" />

                </li>

                <li>

                    <img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />

                </li>

            </ul>

        </div>

    </div>

    <script type="text/javascript">

        var baseNum = 960;

        var imgNum = 5, initNum = 0;

        var interval = setInterval(function(){

            if(initNum == imgNum){

                initNum = 0;

                $(".scrollContainer").css({"marginLeft" : "0px"});

            }

            $(".scrollContainer").animate({"marginLeft": -baseNum * initNum + "px"}, 1500);

            initNum++;

        }, 2000);

    </script>

</body>

</html>

滚动轮播效果，.net 没得混看来只能去写js 了的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  3. JS--图片轮播效果

    搞了很长时间才弄清楚图片轮播效果的原理,理解各个事件发生的原因,浪费了这么长的时间,只怪自己的知识太过于薄弱.现将代码写下,供大家参看,如有不妥之处还望指出,大家一起学习. 功能: 1.点击左右两边的 ...

  4. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  5. H5滚动轮播插件

      概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能   支持超 ...

  6. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  7. iOS 封装跑马灯和轮播效果

    代码地址如下:http://www.demodashi.com/demo/14075.html 功能概述和预览 功能描述:WSL_RollView 是基于UICollectionView实现的支持水平 ...

  8. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  9. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

随机推荐

  1. css3 缓动公式

    var easingMap = { "linear": [0.250, 0.250, 0.750, 0.750], "ease": [0.250, 0.100, ...

  2. NOIP2014 uoj20解方程 数论（同余）

    又是数论题 Q&A Q:你TM做数论上瘾了吗 A:没办法我数论太差了,得多练(shui)啊 题意 题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, ...

  3. 为什么angularjs使用ui-router时要使用html5Mode?

    为什么我们要在使用angular ui-router时要使用html5Mode=true这个呢? 在angular中,你在访问链接时,可能访问的链接为"#/link". 如果你设置 ...

  4. iOS 常用的向上,向下取整, 四舍五入函数

    向上取整:ceil(x),返回不小于x的最小整数; 向下取整:floor(x),返回不大于x的最大整数; 四舍五入:round(x) 截尾取整函数:trunc(x)  

  5. Learn ZYNQ (8)

    在zed的PS端运行spark(已成功): (1)设置uboot为sd卡启动rootfs: "sdboot=if mmcinfo; then " \                 ...

  6. SQL语法

    full outer--全连.两表相同的组合在一起,A表有,B表没有的数据(显示为null),同样B表有,A表没有的显示为(null) A表 left join B表--左连,以A表为基础,A表的全部 ...

  7. UI控件闪烁及刷新

    我们常常在一个窗口上放置很多控件,在改变窗口大小时,控件会跟着一起闪烁... 此时,可以将窗口添加WS_CLIPCHILDREN属性即可.(如果包含多层,都需要WS_CLIPCHILDREN属性) 默 ...

  8. 【iCore3 双核心板】【发布基于 iCore3的显示模块（包含7寸屏，4.3寸屏，vga模块等】

    ====================注意 ==================== 1.本代码仅仅对iCore3客户(使用者)开放: 2.iCore3使用者凭购买id或者订单号给 gingko[A ...

  9. 【iCore3 双核心板_FPGA】实验二十六：SDRAM读写测试实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1c1VRibY iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  10. PHP 天巡机票接口

    一个旅游网站项目,网站需要机票预订接入了天巡机票接口,获取机票信息,不搞不知道,一搞吓一跳比较麻烦. 搜索机票信息需要分2步,首先POST获得一个SESSION,2秒之后,根据这个SESSION,从一 ...