文档章节

图片点击轮播

jackraul
 jackraul
发布于 2016/03/29 14:11
字数 259
阅读 36
收藏 2
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="" type="text/css">
    <script src="" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <script type="text/javascript" src="src/js/jquery-2.1.1.js"></script>
    <style type="text/css">
        .wrap{width: 1200px; height: 200px; margin:0 auto;}
        .pic_wrap{width: 1000px;float: left; overflow: hidden;}
        .pic{width: 2000px; height:200px; float: left;position:relative;left: 0px;}
        li{list-style: none; float: left; height: 180px; width:219px; margin:10px 14px; border:1px solid #ff00ff;}
        .left{ width: 100px; line-height: 200px;float: left;text-align: center; }
        .right{ width: 100px; line-height: 200px; float: left;text-align: center;}
    </style>
</head>
<body>
    <div>
        <a href="javascript:void"><div>left</div></a>
        <div>
            <div>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
            </div>
        </div>
        <a href="javascript:void"><div >right</div></a>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function(){
        var _index = 0;
        var page = 1;
        var visible_count = 4;
        var pic_count = $(".pic li").length;
        $(".right").click(function(){
            if(page+visible_count<pic_count){
                $(".pic").animate({left:'-=248'},200);
                page++;
            }else{
                alert('已经是最后一张了!');
            }
        })
        $(".left").click(function(){
            if(page>1){
                $(".pic").animate({left:'+=248'},200);
                page--;
            }else{
                alert('已经是第一张了!');
            }
        })
    });
</script>


© 著作权归作者所有

jackraul
粉丝 0
博文 4
码字总数 668
作品 0
厦门
程序员
私信 提问
小博老师演示常用JQuery效果 ——图片轮播

[理论知识] 我们在实际开发应用程序的过程中,经常会遇到图片轮播的效果需求,本文小博老师就为大家演示一下,如何使用JQuery框架实现图片轮播的效果。 [步骤解读一]界面布局 首先我们创建一...

博为峰教研组
2016/11/16
103
0
授人以渔式解析原生JS写轮播图

需求与分析 需求: 循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左...

Sadhu
2018/10/16
0
0
Jquery Slides1.1.8版本注释

图片轮播图的应用很广泛,jquery Slides是一个很好的插件,它兼容所有的浏览器,使用起来很方便。缺点就是需要依赖于jquery。根据个人的使用情况,对调用Slides的参数进行中文注释,希望对一...

anx
2012/08/09
339
0
tips:Element-UI对话框与轮播图综合使用

最近在做一个pc后台管理系统,其中有一个需求是这样的:在一个图片列表中点击一个图片可以查看大图而且还要左右切换上一张/下一张(轮播图),因为目前项目中用的ui框架是element-ui,我决定将...

韭菜的故事
2018/09/25
0
0
如何用面向对象的思维去封装一个小型轮播图插件

1、面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较。 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,...

余大彬
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eureka应用注册与集群数据同步源码解析

在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean register() t...

Java学习录
15分钟前
3
0
Java描述设计模式(15):责任链模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景描述 1、请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批当 3<day<=5 天,部门经理审批当 day>5 天...

知了一笑
25分钟前
3
0
总结:数组与链表

1、内存申请:数组在内存上是连续的空间;链表,内存地址上可以是不连续的。 2、查询速度:数组可以随机访问,链表必须顺序访问,即从首个元素开始遍历,逐个查找,所以数组查询很快。 3、写入...

浮躁的码农
33分钟前
5
0
HashMap源码分析

read

V丶zxw
52分钟前
5
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部