效果图：

演示地址：

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. request.get_full_path() 和request.path区别

    1. 都是获取request 请求的url路径 2. request.get_full_path() -- 获取当前url,(包含参数) 请求一个http://127.0.0.1:8000/200/? ...

  2. [BZOJ3560]DZY Loves Math V(欧拉函数)

    https://www.cnblogs.com/zwfymqz/p/9332753.html 由于欧拉函数是积性函数,可以用乘法分配律变成对每个质因子分开算最后乘起来.再由欧拉函数公式和分配律发现就是 ...

  3. POJ 2356 Find a multiple 抽屉原理

    从POJ 2356来体会抽屉原理的妙用= =! 题意: 给你一个n,然后给你n个数,让你输出一个数或者多个数,让这些数的和能够组成n: 先输出一个数,代表有多少个数的和,然后再输出这些数: 题解: 首 ...

  4. 重温PHP之选择排序

    思路:一组数中,选出最小者与第一个位置数交换,然后在剩余数中再找最小者与第二个位置数交换,依次类推,循环到倒数第二个数和最后一个数比较为止. 测试代码: 结果:

  5. struts2对拦截器使用带实例

    拦截器是struts2的核心.拦截器可以拦截请求,控制视图的走向.那么怎么来实现自定义的拦截器呢? 这里我们做一个例子. 首先假现在做了两个jsp页面一个是登陆的信息的(用session来模拟),一个 ...

  6. [MySql]windows下设置mysql默认编码

    摘要 在安装好mysql的时候,如果新建数据库或者表默认的编码为latin1,如果这时候插入中文时,出出现类似下面的乱码的问题. SQLException: Incorrect string valu ...

  7. MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker

    实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student    {       ...

  8. iOS 5解决Could not instantiate class named NSLayoutConstraint问题

    如果使用Xcode 4.5来新建项目,默认是支持AutoLayout的,但是AutoLayout是iOS 6的新特性,如果在iOS 5的simulator上运行程序,会出现Could not inst ...

  9. no scheme 问题

    用xcode4打开xcode3建立的工程,有时候,不能自动转换版本,就会显示no scheme. 这个是由于XXX..xcodeproj包中xcuserdata文件夹中user.xcuserdatad ...

  10. EF实体框架处理实体之间关联关系与EF延迟机制(下)

    在数据库中,表与表之间可能存在多种联系,比如,一对多,多对多的关系.当我们使用逻辑外键在数据库建立两张表之间的关系的时候,我们使用EF实体框架 必然也会将这种关系映射到我们的实体关系中来.所以,在我们 ...