最简单的jQuery图片轮播插件

//图片自己找哈

<!doctype html>

<html ng-app>
<head>
<meta content="charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style type="text/css">
        #banner_list{
            margin: 10px auto;
            width: 240px;
            height: 118px;
            overflow: hidden;
        }
        #banner_list>img{
            width: 240px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="banner_list">
        <img src="imgs/1.jpg" style="display: block;">
        <img src="imgs/2.jpg">
        <img src="imgs/3.jpg">
        <img src="imgs/4.jpg">
        <img src="imgs/5.jpg">
    </div>
</body>
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $.fn.scroll_imgs = function (){
        var timer = 1;
        var last;
        var _this_children = $(this).children();
        var len = _this_children.length;

setInterval(function(){
            _this_children.eq(timer).show();
            last = timer-1;
            if(last==-1) last = len-1;
            _this_children.eq(last).hide();
            timer ++;
            if(timer==len) timer = 0;
        },1000);
    } 
    $("#banner_list").scroll_imgs();
</script>
</html>

时间: 2024-10-14 17:28:38

最简单的jQuery图片轮播插件的相关文章

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果?

Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ?  16个独特的过渡效果 ?  简洁和有效的标记 ?  加载参数设置 ?  内置方向和导航控制 ?  压缩版本大小只有12KB ?  支持链接图像 ?  支持 HTML 标题 ?  3套精美光滑的主题 ?  在MIT许可下免费使用 ?  支持响应式设计 插件下载     效果演示 您可能

jquery图片轮播-插件

更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus.js进行相应的改造. 使用方法就不详述了, 请参见源码及相关注释:查看Demo <!doctype html> <html> <head> <meta charset="utf-8"> <title>基本材料</title&

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

JQuery插件之图片轮播插件–slideBox

来源:http://www.ido321.com/852.html 今天偶然发现了一个比較好用的图片轮播插件-slideBox 先看看效果:http://slidebox.sinaapp.com/ 代码例如以下 1: <!doctype html> 2: <html> 3: <head> 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

jquery实现轮播插件

这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" hr

图片轮播插件FlexSlider

推荐一款万能图片轮播插件FlexSlider 先来看一下都能做出什么效果吧 轮播图方向控制按钮和底部的焦点按钮都是可以控制显示和隐藏,最厉害的一点是该插件支持手机触屏 具体参数设置当然还是github更权威https://github.com/woothemes/FlexSlider/ 友情提示:在github上下载的demo由于用的是google的CDN,由于google被墙可能导致无法运行,建议更改jQuery的调用地址 最后看一下支付宝官方网站上的对该插件的应用效果图

图片轮播插件

刚买了司徒大大的<Javascript框架设计>,准备开始研读.打算在读之前先随便写个图片轮播插件,到读完这本书再来看看现在的自己有多菜....... 顺便做图片轮播的时候用美女照片真影响效率..... 上代码! 先是如何使用: html: <div id='outer' style='width:591px;height:862px;overflow:hidden;margin-left:100px;'> <ul id='try-slide' style='list-sty