<!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. Python中的list和tuple

      list使用方括号[ ]表示: >>> classmates = ['Michael', 'Bob', 'Tracy'] >>> classmates ['Mi ...

  2. SPX Instant Screen Capture

    Today I will recommend a NICE screen capture tool, which name is SPA Instant Screen Capture. http:// ...

  3. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  4. 日志分析_使用shell完整日志分析案例

    一.需求分析 1. 日志文件每天生成一份(需要将日志文件定时上传至hdfs) 2. 分析日志文件中包含的字段:访问IP,访问时间,访问URL,访问状态,访问流量 3. 现在有"昨日" ...

  5. Daily Scrum02 12.06

    由于一些原因,我们的会议没有在昨天如期举行.今天,我们首先将到目前为止的进度进行了总结. 我们第二轮迭代的主要目标是优化算法,美化界面,增加单词软件的趣味性. 我们准备将软件做的更亲民,界面更友好,我 ...

  6. MongoDB的配置、启动、关闭

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  7. uedit修改文件上传路劲，支持api文件接口

    首先修改一个东西ueditor/ueditor.config.js serverUrl: URL + "php/controller.php" 原来 serverUrl: &quo ...

  8. 关于 apue.h 的使用方法

    unix中有很多地方使用到apue.h  .apue.h是作者自己写的一个头文件,这个文件怎么用,晚上有很多方法,但是经过尝试大多不好用. 经过本人尝试,可以把src.3e.tar.gz 的代码解压到 ...

  9. linux添加环境变量(centos)

    1.查看当前环境变量 #echo $PATH 2.增加环境变量 #vi /etc/profile export PATH=/usr/path/bin:$PATH 3.生效 #source /etc/p ...

  10. nginx 不带www到www域名的重定向

    如果是单次重定向用 redirect, 如果永久跳转用 permanent,这里用 permanent { listen       80; server_name  xxx.com www.xxx. ...