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

一、原理说明

（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. Junit的常见注解

    @Beforeclass:表示使用此注解的方法在测试类被调用之前执行,在一个测试类中只能声明此注解一次,此注解的方法只被执行一次 @AfterClass :表示使用此注解的方法在测试类被调用结束退出之 ...

  2. [WiX]Component Rules 101

    原文:http://robmensching.com/blog/posts/2003/10/18/component-rules-101 I've been debating with myself ...

  3. LeNet - Python中的卷积神经网络

    本教程将  主要面向代码,  旨在帮助您 深入学习和卷积神经网络.由于这个意图,我  不会花很多时间讨论激活功能,池层或密集/完全连接的层 - 将来会有  很多教程在PyImageSearch博客上将 ...

  4. JVM-Java GC分析

    如何获取JavaGC日志 用动态命令查看: jstat -gc 1262 2000 20  每隔20秒输入一次日志,总共输入20次 设置GC参数打印出日志 -XX:+PrintGC 输出GC日志 -X ...

  5. VS2015 未能正确加载 JavascriptWebExtensionsPackage

    解决方法: Close Visual Studio Open the %UserProfile%\AppData\Local\Microsoft\VisualStudio\<version> ...

  6. CSS3中的pointer-events

    今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题.之前没有好好研究,于是决定仔细研究一下. 一.定义及语法 ...

  7. 【链表】Partition List

    题目: Given a linked list and a value x, partition it such that all nodes less than x come before node ...

  8. linux一键安装php环境

    1.下载一键安装包: http://pan.baidu.com/s/1o6lWyeu 2.unzip -x sh.zip chmod -R 755 sh ./install.sh 等待半小时左右 3. ...

  9. 解决ssh登陆超时方案

    ssh登陆一般默认3分钟无操作则断开连接,有时候还是很烦的,于是解决这个问题. sudo修改/etc/ssh/sshd_conf文件 #sudo vim /etc/ssh/sshd_config #在 ...

  10. mysql Inoodb 内核

    MySQL从5.5版本开始将InnoDB作为默认存储引擎,该存储引擎是第一个完整支持事务ACID特性的存储引擎,且支持数据行锁,多版本并发控制(MVCC),外键,以及一致性非锁定读. 作为默认存储引擎 ...