<!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. BZOJ2471 : Count

    考虑KMP,设$f[i][j][S]$表示还剩最低$i$位没有确定,目前KMP匹配到了$j$这个位置,前缀匹配情况是$S$,最终会匹配到哪里,中途匹配成功几次. 其中$S[i]$是一个pair< ...

  2. HTML5新增的标签

    结构性元素<header><footer>定义页眉(与<head>不一样)和页脚 <section>定义section<article> 定 ...

  3. Mac下各种网络命令的使用

    Mac下各种网络命令的使用(http://blog.51yip.com/linux/745.html) pingwww.baidu.com 会一直ping下去,和windows不一样, windows ...

  4. web系统登陆页面增加验证码

    传统登陆页面中包含两个输入项: • 用户名 • 密码有时为了防止机器人进行自动登陆操作,或者防止恶意用户进行用户信息扫描,需增加动态验证码功能.此时,登陆页面中包含了三个输入项: • 用户名 • 密码 ...

  5. Linux用过的命令

    -上传sudo -u b2b rz--创建文件夹sudo -u b2b mkdir--copysudo -u b2b cp /b2b/apache-tomcat-7.0.64/matt/DqN017S ...

  6. org.springframework.web.servlet.DispatcherServlet noHandlerFound

    1 请求URL: http://localhost:8080/mvc/rojas 2 control  RequestMapping  : @RequestMapping(value="xx ...

  7. MySQL：动态开启慢查询日志(Slow Query Log)

    前言 在开发中,高效能的程序 也包括 高效能的查询,所以优化SQL也是程序员必要技能之一.要优化就必须要有慢日志记录才可以知道哪些查询慢,然后反向去修改 慢日志设置方式 写入文件 写入数据库 实践操作 ...

  8. [dpdk] 熟悉SDK与初步使用 （四）(L3 Forwarding源码分析)

    接续前节:[dpdk] 熟悉SDK与初步使用 (三)(IP Fragmentation源码分析) 前文中的最后一个问题,搁置,并没有找到答案.所以继续阅读其他例子的代码,想必定能在其他位置看到答案. ...

  9. Confirm the Ending

    题目 检查一个字符串(str)是否以指定的字符串(target)结尾. 如果是,返回true;如果不是,返回false. 解决思路 利用substr即可 答案 function confirmEndi ...

  10. servlet中service() 和doGet() 、doPost() 学习笔记

    Sevlet接口定义如下: 与Sevlet接口相关的结构图: service() 方法是 Servlet 的核心.每当一个客户请求一个HttpServlet 对象,该对象的service() 方法就要 ...