效果图：

演示地址：

http://ae6623.cn/demo/slider/index.html

思路：

利用css的定位属性 left 进行调整图片的显示，每次点击上一页下一页按钮的时候，-图片宽度 * index(当前li索引)即可。

代码：



<!DOCTYPE HTML>

<html>

<head>

    <!--申明当前页面的编码集-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--网页标题-->

    <title>slider</title>

    <!--网页关键词-->

    <meta name="keywords" content="" />

    <!--网页描述-->

    <meta name="description" content="" />

    <!--适配当前屏幕-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <!--禁止自动识别电话号码-->

    <meta name="format-detection" content="telephone=no" />

    <!--禁止自动识别邮箱-->

    <meta content="email=no" name="format-detection" />

    <!--iphone中safari私有meta标签,

        允许全屏模式浏览,隐藏浏览器导航栏-->

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!--iphone中safari顶端的状态条的样式black(黑色)-->

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style type="text/css">

        /*reset 重置*/

        body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,

        td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}

        li{list-style:none;vertical-align:top;}

        table{ border-collapse:collapse;}

        textarea{resize:none;overflow:auto;}

        img{ border:none; vertical-align:middle;}

        em{ font-style:normal;}

        a{ text-decoration:none;}

        a,input{

            -webkit-appearance: none;/*屏蔽阴影*/

            -webkit-tap-highlight-color:rgba(0,0,0,0);

            /*ios android去除自带阴影的样式*/

        }

        a, img {

            /* 禁止长按链接与图片弹出菜单 */

            -webkit-touch-callout: none;

        }

        html, body {

            /* 禁止选中文本(如无文本选中需求,此为必选项) */

            -webkit-user-select: none;

            user-select: none;

        }

        /*public*/

        html {

            font-size : 20px;

        }

        @media only screen and (min-width: 401px){

            html {

                font-size: 25px !important;

            }

        }

        @media only screen and (min-width: 428px){

            html {

                font-size: 26.75px !important;

            }

        }

        @media only screen and (min-width: 481px){

            html {

                font-size: 30px !important;

            }

        }

        @media only screen and (min-width: 569px){

            html {

                font-size: 35px !important;

            }

        }

        @media only screen and (min-width: 641px){

            html {

                font-size: 40px !important;

            }

        }

        body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;

            overflow-x:hidden; overflow-y:auto; font-size:0.7rem;

        }

        .clear{zoom:1;}

        .clear:after{content:''; display:block; clear:both;}

        .fl{float:left;}

        .fr{float:right;}

        .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}

        #slider{width:400px;position: relative;overflow: hidden;}

        #slider-head{width:400px;}

        #silder-head>div{float: left;height: 20px;line-height: 20px;vertical-align: middle;}

        #slider-head-button{width:350px;}

        #slider-head-button span{font-size: 12px;display: block;float: left;margin:3px;}

        #slider-content ul{position:relative;height: 150px;width:2000px;}

        #slider-content li{position:relative;width:200px;height: 150px;float: left;margin-right:5px;}

        #slider-content  .li1{background-color:#3399cc;}

        #slider-content  .li2{background-color: #cc3333;}

        #slider-head-dots{ }

        #slider-head-dots li{display: inline-block; width: 10px; height: 10px; margin: 5px 0px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; background: #000;} 

        #slider-head-dots li.active,li:hover {

            background: #000;

            opacity: 1;

        }

        </style> 

        </head>

<body>

    <div>

        <div id="main">

            <div id="slider">

                <div id="silder-head">

                    <div id="slider-head-button"><span class="l"> <a href="#" class="pri"><</a></span><span class="r"> <a href="#" class="next">></a> </span></div>

                    <div id="slider-head-dots">

                        <ol class="dots">

                            <li class="dot active">1</li>

                            <li class="dot">2</li>

                        </ol>

                    </div>

                </div>

                <div class="clear"></div>

                <div id="slider-content">

                    <ul>

                        <li class="li1">1</li>

                        <li class="li2">2</li>

                        <li class="li1">3</li>

                        <li class="li2">4</li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $(function() {

        console.log('author:Luo Yu');

        //拿到小圆点

        var nav = $('#slider-head-dots ol').find('li');

        //轮播内容

        var content = $("#slider-content").find('ul');

       //按钮 左右剪头，我没用图片，用了大于号小于号临时将就一下

        var head_button = $("#slider-head-button").find("a");

        //第一张图片的宽度

        var imgWidth = content.find("li").eq(0).width() + 5;

        //点击了小圆点

        nav.click(function() {

            var me = $(this);

            var index = me.index();

            nav.removeClass("active");

            me.addClass("active");

            //轮播

            content.animate({

                "left": -imgWidth * 2 * index

            });

        });

        //点击了左右剪头

        head_button.click(function(){

            var me = $(this);

            var index = me.attr("class");

            if(index == "pri"){

                index = 0;

            }else{

                index = 1;

            }

            nav.removeClass("active");

            nav.eq(index).addClass("active");

            content.animate({

                "left": -imgWidth * 2 * index

            });

        });

    });

    </script>

</body>

</html>

jquery制作一个简单的轮播的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. jquery做一个小的轮播插件---有BUG，后续修改

    //首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...

  3. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  4. Jquery制作--焦点图左右轮播

    公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...

  5. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  7. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  8. Jquery教你写一个简单的轮播.

    这个我表示写的不咋地-_-//,但是胜在简单,可优化性不错. 实际上我本来想写个复杂点的结构的,但是最近忙成狗了!!!!所以大家就讲究着看吧 HTML结构 <div class="ba ...

  9. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

随机推荐

  1. 在线HTTP速度测试(响应时间测试)及浏览器兼容测试

    一.前言 网站的响应时间,是判断一个网站是否是好网站的重要的因素之一.百度首页的响应时间在全国各个省份小于10ms.这个响应时间远远好于竞争对手.根据美丽说的技术负责人分析,美丽说访问速度提升10%, ...

  2. 利用Pastezort渗透win7

    下载Pastezort git clone https://github.com/ZettaHack/PasteZort.git 给Pastezort文件夹提升权限 /root/PasteZort/ ...

  3. 【BZOJ】4720: [Noip2016]换教室

    4720: [Noip2016]换教室 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1690  Solved: 979[Submit][Status ...

  4. ZOJ 3622 Magic Number 打表找规律

    A - Magic Number Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Subm ...

  5. windows下git命令的使用

    一.写在前面 关于git,出于自己的爱好,前段时间玩了一下,也自己上网查了一下资料,现简单记录一下,以备查看. 当然,本文并不是介绍配置git服务器的文章,而是以github服务器作为git的远程仓库 ...

  6. GCC 4.9.0 公布，提升 C++11 和 C++14 特性

    from :http://www.oschina.net/news/51084/gcc-4-9-0 GCC 4.9.0 公布,此版本号是个主要版本号更新,包含了 GCC 4.8.x 系列和之前的 GC ...

  7. Syncovery : Google Docs protocol completely replaced with Google Drive

    Google Docs protocol completely replaced with Google Drive In May 2015, the older Google Docs API wa ...

  8. 使用 soapUI 测试 REST 服务

    REST 服务介绍 REST(Representational State Transfer)是 Roy Fielding 博士在 2000 年提出的一种新的软件架构风格,它以资源(resource) ...

  9. How to check Ubuntu version

    Below you can find some tips on how to check Ubuntu version you are currently running. The first pla ...

  10. 在win7下安装VC6.0

    一.以系统管理员的身份执行VC6.0安装文件 二.在安装或者使用VisualC++6.0时,凡是出现兼容性问题提示对话框,一律按下面方式处理--把"不再显示此消息"打上勾,然后选择 ...