<!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. 【DP】HDU 1087

    HDU 1078 Super Jumping! Jumping! Jumping! 题意: 有这么个游戏,从start到end(自己决定在哪停下来)连续跳圈,中间不能空一个圈不跳,圈里的数字必须比你上 ...

  2. JavaScript必须了解的知识点总结【转】

    整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...

  3. ArrayFire与CUDA环境配置问题

    1.ArrayFire与cuda版本不一致时的解决方案 以Visual Studio2013为例,在工程-属性-C/C++--预处理加入宏AFCL,即可解决.

  4. 基于socket的TCP和UDP编程

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...

  5. VerifyCodeUtil.java

    package com.vcredit.framework.utils; import java.awt.Color;import java.awt.Font;import java.awt.Grap ...

  6. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  7. OpenGL函数思考-glLoadIdentity

    函数原型: void glLoadIdentity(void) 函数说明: OpenGL为我们提供了一个非常简单的恢复初始坐标系的手段,那就是调用glLoadIdentity()命令.该命令是一个无参 ...

  8. 数据库的修改和删除；比较标签代替<,>,=号；模板替换;session的用法

    注: 1.session:系统默认开启;用途:防止跳过登录(只能访问登录方法);session和cookie的用法(手册->专题); 赋值:session('name','value'); 取值 ...

  9. jQuery 使用索引值容易出错的一个地方

    先看代码 $('input:eq(2)').attr('value', function(index, val){ console.log(index); //输出0 }); 问:当前元素的索引值,不 ...

  10. ESXi 5.5开启并配置SNMP

    1. 安装vshpere cli 2.设定SNMP通讯字并开启SNMP功能 进入到bin目录. C:\Program Files (x86)\VMware\VMware vSphere CLI\bin ...