<!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: DOM 小实例

    一.全选 全部取消  反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...

  2. jQueryMobile引入文件后样式无法正常显示

    jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:

  3. Learn ZYNQ (7)

    矩阵相乘的例子 参考博客:http://blog.csdn.net/kkk584520/article/details/18812321 MatrixMultiply.c typedef int da ...

  4. MongoDB 3.X 用户权限控制

    摘要: MongoDB 3.0 安全权限访问控制,在添加用户上面3.0版本和之前的版本有很大的区别,这里就说明下3.0的添加用户的方法. 环境.测试: 在安装MongoDB之后,先关闭auth认证,进 ...

  5. 1.Powershell认识

    Windows PowerShell 是一种命令行外壳程序和脚本环境,自Windows Server 2008开始就有内置于系统当中,有取代CMD之势.管理员使用Powershell完成一些日常重复的 ...

  6. hibernate学习(9)——日志，一对一，二级缓存

    1.Hibernate中的日志 1  slf4j 核心jar  : slf4j-api-1.6.1.jar .slf4j是日志框架,将其他优秀的日志第三方进行整合. 整合导入jar包 log4j 核心 ...

  7. SQL PRIMARY KEY 约束\SQL FOREIGN KEY 约束\SQL CHECK 约束

    SQL PRIMARY KEY 约束 PRIMARY KEY 约束唯一标识数据库表中的每条记录. 主键必须包含唯一的值. 主键列不能包含 NULL 值. 每个表都应该有一个主键,并且每个表只能有一个主 ...

  8. sshpass----------------sshfs--sftp(sublime)

    源码下载地址:http://sourceforge.net/projects/sshpass/   tar -zxvf sshpass-1.05.tar.gz cd sshpass-1.05 ./co ...

  9. linq join的lambda写法

    var query = _db.Bank_CommercialOpus .Join(_db.Bank_Opus, s => s.OpusID, Opus => Opus.ID, (s, O ...

  10. 如果让你来做HashMap扩容，如何实现在不影响读写的情况下扩容？

    我觉得逼格高,不是体现在问题多刁钻,知识点多深,而是一个非常明确,无歧义的问题,能考察出面试者多方面的能力.这个问题背后:1.了解java中,HashMap的实现:如果一个面试者了解这一点,说明至少他 ...