下面来看看最终做的手动点击轮播效果：

一、原理说明

（1）首先是轮播图的架构，我采用了一个最外边的大div包住两个小div，一个小div里面放四张图片，另一个小div里面放四个数字按钮

（2）对最外边的大div设置的宽度为图片的宽度，超出大div宽度的都需要隐藏，但是对于盛放图片的小div设置宽度为2000px，大一点方便四张图左浮动布局

（3）当数字按钮点击时，获取按钮的索引值，这样就可以知道每张图片左移多少宽度

从上面的图可以看出，四张图片是浮动起来横着的布局，当数字按钮被点击时，图片就要按照数字按钮的索引值引动N个图片的宽度到达父框架里面展示，因为父框架外面的图片都会被隐藏掉

二、下面来看主体程序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>轮播图（手动点击轮播）</title>

        <link type="text/css" rel="stylesheet" href="css/layout.css"  />

    </head>

    <body>

        <div class="slideShow">

            <!--图片布局开始-->

            <ul>

                <li><a href="#"><img src="img/picture01.jpg" /></a></li>

                <li><a href="#"><img src="img/picture02.jpg" /></a></li>

                <li><a href="#"><img src="img/picture03.jpg" /></a></li>

                <li><a href="#"><img src="img/picture04.jpg" /></a></li>

            </ul>

            <!--图片布局结束-->

            <!--按钮布局开始-->

            <div class="showNav">

                <span class="active">1</span>

                <span>2</span>

                <span>3</span>

                <span>4</span>

            </div>

            <!--按钮布局结束-->

        </div>

        <script src="js/jquery-1.11.3.js"></script>

        <script src="js/layout.js"></script>

    </body>

</html>

三、CSS样式

*{

    margin: 0;

    padding: 0;

}

ul{

    list-style: none;

}

.slideShow{

    width: 346px;

    height: 210px;     /*其实就是图片的高度*/

    border: 1px #eeeeee solid;

    margin: 100px auto;

    position: relative;

    overflow: hidden;    /*此处需要将溢出框架的图片部分隐藏*/

}

.slideShow ul{

    width: 2000px;

    position: relative;     /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/

}

.slideShow ul li{

    float: left;     /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/

    width: 346px;

}

.slideShow .showNav{     /*用绝对定位给数字按钮进行布局*/

    position: absolute;

    right: 10px;

    bottom: 5px;

    text-align:center;

    font-size: 12px;

    line-height: 20px;

}

.slideShow .showNav span{

    cursor: pointer;

    display: block;

    float: left;

    width: 20px;

    height: 20px;

    background: #ff5a28;

    margin-left: 2px;

    color: #fff;

}

.slideShow .showNav .active{

    background: #b63e1a;

}

上面样式我已经备注出来很重要的地方了，相信有基础的很容易看懂，刚开始我在.slideShow ul样式里面忘了写position: relative;导致后面的jquery程序图片一直无法移动，耽误了很长时间才找出这个错误，希望大家可以注意这个地方.

四、jQuery程序

$(document).ready(function(){

    var slideShow=$(".slideShow"),     //获取最外层框架的名称

        ul=slideShow.find("ul"),

        showNumber=slideShow.find(".showNav span"),//获取按钮

        oneWidth=slideShow.find("ul li").eq(0).width();   //获取每个图片的宽度

        showNumber.on("click",function(){           //为每个按钮绑定一个点击事件

            $(this).addClass("active").siblings().removeClass("active");   //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉

            var index=$(this).index();  //获取哪个按钮被点击，也就是找到被点击按钮的索引值

            ul.animate({

                "left":-oneWidth*index,   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定

            })

        })

})

上面程序需要注意的是left属性是左移动，所以为负值.

jQuery轮播图（手动点击轮播）的更多相关文章

  1. jquery特效（3）—轮播图①（手动点击轮播）

    写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等,虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退. 下面来 ...

  2. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  3. 01.轮播图之一 ：scrollView 轮播

    接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...

  4. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  5. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  6. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  7. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  8. 01.轮播图之三 ： collectionView 轮播

    个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码 let's begin…… 创建自定义的view .h 声明文件 @i ...

  9. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

随机推荐

  1. POJ 2260

    #include <iostream> #define MAXN 100 using namespace std; int _m[MAXN][MAXN]; int main() { //f ...

  2. javascript数据结构与算法--二叉树（插入节点、生成二叉树）

    javascript数据结构与算法-- 插入节点.生成二叉树 二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * * ...

  3. QuantLib 金融计算——基本组件之 Currency 类

    目录 QuantLib 金融计算--基本组件之 Currency 类 概述 构造函数 成员函数 如果未做特别说明,文中的程序都是 python3 代码. QuantLib 金融计算--基本组件之 Cu ...

  4. 2d旋转（css3实现过度效果和动画效果）

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. Storm累计求和Demo并且在集群上运行

    打成jar包放在主节点上去运行. import java.util.Map; import backtype.storm.Config; import backtype.storm.StormSubm ...

  6. [转]Subdirectory Checkouts with git sparse-checkout

    From:http://jasonkarns.com/blog/subdirectory-checkouts-with-git-sparse-checkout/ If there is one thi ...

  7. Android版本分布——2017年5月更新

    Code Name Version API Level Last month This month Change gingerbread(姜饼) 2.3.3——2.3.7 10 0.9% 1.0% 0 ...

  8. springboot-19-整合dubbox

    springboot 整合dubbox 1, 没了,,, 2, 安装zookeeper 可见: http://www.cnblogs.com/wenbronk/p/6636926.html 2.1 下 ...

  9. Vue前端框架面试问题

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  10. Java 裁剪图片

    package com.test; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.Ima ...