`

图片的轮播（轮播图）

 
阅读更多

首先，既然使用了jquery，制作方法就不再是最基础的那种将图片列表的位置一直改变，例如：切第二张图片left:-100px，切第三种图片left:-200px等等。这种方法在从最后一张图回第一张图时会快速倒回去进行轮播（肯定不是你想要的对不对）

其次，制作目标是轮播基本的三个功能：自动播放 ；光标移入停止播放，移开继续播放 ；按钮操作前/后张图片切换。

再然后，制作图片轮播的方法网上非常多，用插件几行代码就可以搞定但是你看不见代码不理解，so我自己理解整理了下代码。

html代码

 

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>banner图</title>
    <link href="111.css" rel="stylesheet"/>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="111.js"></script>
</head>
<body>
<div class="wrap">
    <div class="banner">
        <div class="bannerCon">
            <ul class="imgList">
                <li><a href="#"><img src="images/banner01.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/banner03.jpg" alt=""/></a></li>
            </ul>
            <ul class="btnList clearfix">
                <li class="cur"><span></span></li>
                <li><span></span></li>
                <li><span></span></li>
            </ul>
            <span class="pre-nex prev">&lt;</span>
            <span class="pre-nex next">&gt;</span>
        </div>
    </div>
</div>
</body>
</html>

 

其实我的原理和简单，首先，先把图片并排显示，溢出部分隐藏（float:left; visibility: hidden ;）或着用JQuery

代码写

css代码：

 

.banner {
    position: relative;
    height: 400px;
    overflow: hidden;
}
.banner .bannerCon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 800px;
    height: 400px;
    margin-left: -400px;
    overflow: hidden;
}
.bannerCon .imgList {
    position: absolute;
    top: 0;
    left: 0;
    width: 99999px;
    height: 400px;
}
.bannerCon .imgList li {
    float: left;
    width: 800px;
    height: 400px;
}
.bannerCon .imgList li a {
    position: relative;
    display: block;
    height: 100%;
}
.bannerCon .imgList li img {
    width: 800px;
    height: 400px;
}
.bannerCon .pre-nex {
    display: none;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 60px;
    margin-top: -40px;
    font: bold 40px/60px Simsun;
    color: #ccc;
    text-align: center;
    border:none;
    background: rgba(0,0,0,.30);
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
    cursor: pointer;
    z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 12px;
    text-align:center;
    z-index: 2;
    overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 6px;
    background-color:#14829e;
    cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }
 首先jquery中的animate自定义动画使图片列表的第一列左移120px，用时1000毫秒，左移完成后执行接下来的函数：将图片列表的第一列克隆存在名为temp的变量中，将第一列删除。此时克隆后的temp依然保持着之后marginLeft:"-120px"的css样式，先将其回0，否则在将插到队尾时会盖在前一张上。最后将克隆后的列通过append()插入队尾。

 

首先将图片列表的最后一列克隆，并将最后一列移除。将克隆后的temp样式设为-120px，否则插到队头时会盖住第一张。

右移：将克隆的temp通过prepend插入队头，注意此时图片列表的第一张不再是原始的第一张而是刚才插到队头的temp，由于temp的marginLeft为-120px，将其变为0。整个图片列表自然会右移，显示上一张。

 

$btnPreNex.click(function(){      //左右按钮点击事件
            var index = $btnLi.index(this);
            if($(this).hasClass('next')){
                if(!$imgUl.is(":animated")){
                    k += 1;
                    $imgUl.animate({left:-width},speed,function(){
                        $imgUl.css("left",0);
                        $imgUl.children("li:first").appendTo($(this));
                        if(k >= n){
                            k = 0;
                        }
                        $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                    });
                }
            }
            else {
                if(!$imgUl.is(":animated")){
                    k += -1;
                    $imgUl.css("left",-width);
                    $imgUl.children("li:last").prependTo($imgUl);
                    $imgUl.stop().animate({left:0},speed);
                    if(k < 0){
                        k = n-1;
                    }
                    $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                }
            }
        });
 

 

分享到：
隐藏和显示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    winform图片轮播控件.zip

    在Windows Forms（Winform）应用开发中，图片轮播控件是一种常见的功能，它能够以动画效果展示一系列图片，常用于展示产品、演示或者作为背景显示。本项目提供的"winform图片轮播控件.zip"文件包含了一个用C#语言...

    jquery图片轮播图多图切换效果（带小图左右箭头）

    在网页设计中，图片轮播图是一种常见的交互元素，它能有效地展示多张图片而不会占用过多的空间。本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，...

    图片轮播 新浪图片轮播 雅虎图片轮播

    图片轮播是一种常见的网页元素，用于展示一组图片并自动进行切换，为用户提供动态且吸引人的视觉体验。在互联网上，新浪和雅虎等知名网站都广泛使用图片轮播来展示新闻、广告或特色内容。本项目是仿照新浪和雅虎的...

    jsp图片轮播html

    这种结合可以实现服务器端与客户端的交互，为用户提供更加丰富的网页体验，比如图片轮播功能。 在HTML5中，图片轮播通常使用`&lt;img&gt;`标签来展示图片，并通过CSS3来控制动画效果，如滑动过渡、淡入淡出等。此外，...

    图片轮播HTML5

    1. 结构：一个基本的图片轮播通常包含一个容器（如`&lt;div&gt;`），里面放置多个图片（`&lt;img&gt;`）或者`&lt;figure&gt;`元素。每个图片都有一个对应的隐藏状态，以便于轮播切换。 2. 动画效果：jQuery提供了`fadeIn()`和`fadeOut...

    WPF 图片轮播 2D 3D

    **WPF 图片轮播 2D 3D** Windows Presentation Foundation（WPF）是Microsoft开发的一个用于构建桌面应用程序的框架，它提供了丰富的图形、多媒体和界面设计能力。在WPF中，我们可以创建复杂的2D和3D图像展示，其中...

    html+js+css图片轮播图下方配文字可变图片可点击.rar

    综上所述，"html+js+css图片轮播图下方配文字可变图片可点击"是一个综合运用HTML、CSS和JavaScript技术的实例，它展示了如何创建一个具有交互性和动态效果的图片轮播组件，同时也体现了前后端分离的设计思想，使得...

    图片轮播左右轮播封装插件

    在IT行业中，图片轮播是一种常见的用户界面元素，用于展示多张图片或内容，并通过某种交互方式（如自动播放、用户点击）进行切换。在这个场景下，我们讨论的是一个名为"图片轮播左右轮播封装插件"的工具，它为开发者...

    WPF 图片轮播 3D

    在Windows Presentation Foundation（WPF）中，实现3D图片轮播是一种高级的用户界面技术，它结合了2D图像处理和3D图形渲染，为用户提供更丰富、更动态的视觉体验。WPF提供了强大的图形处理能力，使得创建这种效果...

    html实现图片轮播（含代码和注释）

    最后，在JavaScript部分，我们通过获取轮播图容器和其中的图片元素来操作轮播图。我们使用变量currentSlide来存储当前显示的图片索引，并使用setInterval函数设置了一个定时器，每隔3000毫秒（3秒）切换到下一张图片...

    jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字

    jQuery轮播图、图片切换、图片轮播 代码简介：兼容IE8的jQuery轮播图插件是一款兼容性很好的，使用非常简单的网站焦点图代码，依赖jquery和pageSwitch.js来实现轮播效果，轮播图以背景图的方式插入到当前页面进行...

    js图片轮播（4张图片）

    js图片轮播（4张图片） 很简单的一段代码 你懂的

    22种WPF图片轮播特效.zip

    在本文中，我们将深入探讨基于WPF（Windows Presentation Foundation）的图片轮播特效，这是一个用于构建桌面应用程序的强大框架。标题“22种WPF图片轮播特效.zip”表明这是一个包含22种不同图像切换效果的资源包，...

    图片轮播素材 左右按钮切换 图片叠加

    在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...

    WPF3D图片轮播效果

    在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现3D图片轮播效果。WPF是Microsoft提供的一种强大的用户界面框架，它允许开发者创建丰富的、交互式的桌面应用程序，其中包括对2D和3D图形...

    用C#实现的图片轮播

    在本文中，我们将深入探讨如何使用C#编程语言在ASP.NET环境中实现一个图片轮播功能。这个功能在网站的首页上十分常见，用于展示产品、新闻或者任何其他需要动态显示的图片序列。当我们提到“图片轮播”，通常指的是...

    IOS轮播图合集（视频+图片）

    总结起来，“IOS轮播图合集（视频+图片）”这个资源可能是为iOS开发者提供的一种包含视频和图片轮播功能的代码库，包含了上述所有关键技术和细节。开发者可以利用这个库快速实现轮播图功能，同时也可以参考其源码...

    Unity实现图片轮播组件

    游戏中有时候会见到图片轮播的效果，那么这里就自己封装了一个，包括自动轮播、切页按钮控制、页码下标更新、滑动轮播、切页后的回调等等 。 下面，先上一个简陋的gif动态效果图 从图中可以看出，该示例包括了三张...

    WPF实现的图片轮播控件

    在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 实现一个自定义的图片轮播控件。WPF是.NET Framework中的一个强大的UI框架，它提供了丰富的图形功能和强大的数据绑定机制，使得创建美观且...

    IOS图片轮播和引导界面

    在iOS应用开发中，图片轮播和引导界面是常见的用户交互设计元素，它们为用户提供吸引人的视觉体验并帮助用户了解应用程序的核心功能。本教程将详细探讨如何在iOS中实现这两种功能。 首先，让我们来理解“图片轮播”...

Magicbox
Global site tag (gtag.js) - Google Analytics