文档章节

图片轮播

ArlenXu
 ArlenXu
发布于 2015/01/31 10:58
字数 303
阅读 99
收藏 5

css: 

* {

        margin: 0px;

        padding: 0px;

        font-size: 14px;

        }

        div.LunBo {

        position: relative;

        list-style-type: none;

        height: 170px;

        width: 490px;

        }

        div.LunBo ul li {

        position: absolute;

        height: 170px;

        width: 490px;

        left: 0px;

        top: 0px;

        display: none;

        }

        div.LunBo ul li.CurrentPic {

        display: block;

        }

        div.LunBo div.LunBoNum {

        position: absolute;

        left: 374px;

        bottom: 11px;

        width: 83px;

        text-align: right;

        background-color: #999;

        padding-left: 10px;

        }

        div.LunBo div.LunBoNum span {

        height: 20px;

        width: 15px;

        display: block;

        line-height: 20px;

        text-align: center;

        margin-top: 5px;

        margin-bottom: 5px;

        float: left;

        cursor: pointer;

        }

        div.LunBo div.LunBoNum span.CurrentNum {

        background-color: #3F6;

        }

html:

<html>
    <head>
        <meta charset="utf-8">
        <title>
            图片轮播演示
        </title>
        <link rel="stylesheet" type="text/css" href="css/1.css">
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <div class="LunBo">
            <ul>
                <li class="CurrentPic">
                    <img src="images/1.jpg" width="490" height="170">
                </li>
                <li>
                    <img src="images/2.jpg" width="490" height="170">
                </li>
                <li>
                    <img src="images/3.jpg" width="490" height="170">
                </li>
                <li>
                    <img src="images/4.jpg" width="490" height="170">
                </li>
                <li>
                    <img src="images/5.jpg" width="490" height="170">
                </li>
            </ul>
            <div class="LunBoNum">
                <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span>
            </div>
        </div>
        <script type="text/javascript" language="javascript">

        var PicTotal = 5;

        var CurrentIndex;

        var ToDisplayPicNumber = 0;

        $("div.LunBo div.LunBoNum span").click(DisplayPic);

        function DisplayPic() {

        // 当前页

        CurrentIndex = $(this).index();

        // 删除同级的类属性

        $(this).parent().children().removeClass("CurrentNum")

        // 为当前元素添加类

        $(this).addClass("CurrentNum");

        // 隐藏全部图片

        var Pic = $(this).parent().parent().children("ul");

        $(Pic).children().hide();

        // 显示指定图片

        $(Pic).children("li").eq(CurrentIndex).show();

        }

        function PicNumClick() {

        $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");

        ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;

        setTimeout("PicNumClick()",1000);

        }

        setTimeout("PicNumClick()",1000);

        </script>
    </body>
</html>




© 著作权归作者所有

ArlenXu
粉丝 13
博文 105
码字总数 63656
作品 0
杭州
后端工程师
私信 提问
小博老师演示常用JQuery效果 ——图片轮播

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

博为峰教研组
2016/11/16
73
0
4.22、Bootstrap V4自学之路-----内容---轮播

示例 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="......

Asktao
2016/03/25
105
0
授人以渔式解析原生JS写轮播图

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

Sadhu
2018/10/16
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
2018/08/12
0
0
Rxjava + ViewPager 打造实用图片轮播

背景 说到图片轮播,之前写过一篇文章《造轮子:android自定义专属广告轮播控件》,不过当时是采用ViewFlipper实现图片轮播的,最近开始研究Rxjava技术,发现有个interval的方法,觉得很实用,...

码无止境
2016/09/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部