/**

  * Created by hui on 2015/11/3.

  */

 $(function(){

     var circleLi = $('.poster-item');

     var liLength = circleLi.length;

     var L = 640;

     var n = 640;

     var posterUl = $('.poster-ul');

     var posterUlLeft = posterUl.position().left;

     var action = {

         initCss:function(){

             (function setCss(){

                 for(var i= 0;i<liLength;++i){

                     circleLi[i].style.left=i*L-n*2+"px";

                 }

             })();

         },

         ifOver:function(Left){

             if(Left<-3*n){

                 Left=2*n;

             }

             if(Left>2*n){

                 Left = -3*n;

             }

             return Left;

         },

         moveLeft:function(){

             posterUlLeft-=n;

             posterUlLeft = action.ifOver(posterUlLeft);

             posterUl.animate({left:posterUlLeft+'px'});

         },

         moveRight:function(){

             posterUlLeft+=n;

             posterUlLeft = action.ifOver(posterUlLeft);

             posterUl.animate({left:posterUlLeft+"px"});

         }

     };

     action.initCss();

     $('.poster-left-btn').click(action.moveLeft);

     $('.poster-right-btn').click(action.moveRight);

 });

原谅我"无耻"的使用了jquery,不过以后有时间我会尽量用原生的js来实现这个的。

html代码：

<html lang="en"><head>

    <meta charset="UTF-8">

    <title></title>

    <link href="style.css" rel="stylesheet">

    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>

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

</head>

<body>

<div class="J_poster poster-main">

    <div class="poster-btn poster-left-btn">&lt;</div>

    <ul class="poster-ul">

            <li class="poster-item" style="left: -1280px;"><a href="#"><img src="./img/1.jpg"></a></li>

            <li class="poster-item" style="left: -640px;"><a href="#"><img src="./img/2.jpg"></a></li>

            <li class="poster-item" style="left: 0px;"><a href="#"><img src="./img/3.jpg"></a></li>

            <li class="poster-item" style="left: 640px;"><a href="#"><img src="./img/4.jpg"></a></li>

            <li class="poster-item" style="left: 1280px;"><a href="#"><img src="./img/5.jpg"></a></li>

            <li class="poster-item" style="left: 1920px;"><a href="#"><img src="./img/6.jpg"></a></li>

    </ul>

    <div class="poster-btn poster-right-btn">&gt;</div>

    <div class="poster-circle-div">

        <ul class="circle-ul">

            <li class="circle-li"></li>

            <li class="circle-li"></li>

            <li class="circle-li"></li>

            <li class="circle-li"></li>

            <li class="circle-li"></li>

            <li class="circle-li"></li>

        </ul>

    </div>

</div>

<script>

</script>

</body></html>

css代码：

 html,body,ul,li,p{

     margin:;

     padding:;

 }

 ul,li{

     list-style: none;

 }

 a{

     text-decoration: none;

 }

 .clearfix{

     clear: both;

 }

 .poster-main{

     width: 640px;

     height: 270px;

     position: relative;

     margin: auto;

     overflow: hidden;

 }

 .poster-btn{

     position: absolute;

     width: 50px;

     height: 100px;

     text-align: center;

     line-height: 100px;

     font-size: 3.5em;

     top: 70px;

     cursor: pointer;

     z-index:;

     background: rgba(0,0,0,.3);

     color: #fff;

     -webkit-transition: all 0.3s;

     -moz-transition: all 0.3s;

     -ms-transition: all 0.3s;

     -o-transition: all 0.3s;

     transition: all 0.3s;

     -webkit-user-select: none;

     -moz-user-select: none;

     -ms-user-select: none;

     user-select: none;

 }

 .poster-btn:hover{

     background: rgba(0,0,0,.5);

 }

 .poster-left-btn{

     left:;

 }

 .poster-right-btn{

     right:;

 }

 .poster-ul{

     position: absolute;

 }

 .poster-ul .poster-item{

     text-align: center;

     position: absolute;

     transition: all 2s;

 }

 .z{

     z-index:;

 }

 .poster-circle-div{

     position: absolute;

     bottom:;

     left: 50%;

     margin-left: -65px;

     margin-bottom: 30px;

 }

 .circle-ul li{

     float: left;

     cursor: pointer;

     color: #fff;

     background: rgba(255,255,255,.6);

     width: 12px;

     height: 12px;

     text-align: center;

     border-radius: 50%;

     margin: 2px;

 }

 .show{

     background: rgba(0,0,0,.3) !important;

 }

jquery实现轮播图的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  5. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  6. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  8. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  9. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  10. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

随机推荐

  1. 【案例分享】SQL job服务连接不到存储引擎

    在SQL Server agent的日志中发现有大量错误的信息,都是关于作业执行失败的日志 从日志的内容来看,是作业执行过程中无法连接到存储引擎, 可奇怪的是,存储引擎就是本机,而且已经正常启动了,截 ...

  2. [stm32] SIM808模块之发短信\GPS\TCP\HTTP研究

    SIM8008是四频模块,全球可用.含有TTL电平接口等接口,能够实现发短信.打电话.GPRS传输数据.GPS等功能.[正版资料请找beautifulzzzz·博客园] 一些细节: >> ...

  3. Unity3D使用经验总结 编辑器扩展篇

    一个引擎,最重要的就是工具,工具除了提升开发速度,提供可视化操作环境以外,还带了容错功能. 它使得大家的工作局限在一定的范围内,比如一个变量的配置,或者是一些类型的选择. 使用编辑器,使得既使不太明白 ...

  4. 微软 Build 2016年开发者大会发布多项功能升级

    微软Build 2016开发者大会在美国旧金山的莫斯康展览中心开幕.本次大会对一些重点功能进行了完善.如手写笔支持技术Windows Ink.语音识别Cortana应用集(Cortana Collec ...

  5. 关于QCon2015感想与反思

    QCon2015专场有不少关于架构优化.专项领域调优专题,但能系统性描述产品测试方向只有<携程无线App自动化测试实践>.   (一). 携程的无线App自动化     <携程无线A ...

  6. Senparc.Weixin.MP SDK 微信公众平台开发教程（八）：通用接口说明

    一.基础说明 这里说的“通用接口(CommonAPIs)”是使用微信公众账号一系列高级功能的必备验证功能(应用于开发模式). 我们通过微信后台唯一的凭证,向通用接口发出请求,得到访问令牌(Access ...

  7. underscore源码阅读记录

    这几天有大神推荐读underscore源码,趁着项目测试的空白时间,看了一下. 整个underscore包括了常用的工具函数,下面以1.3.3源码为例分析一下. _.size = function(o ...

  8. 在ubuntu上安装nodejs[开启实时web时代]

    作为一名菜鸟,竟然在centos桌面上连输入命令行的地方都找不到,是在是对不起开山祖师,最后苍天不负苦心人,在ubuntu上找见了 [安装过程参考了http://cnodejs.org/topic/4 ...

  9. paip.提升性能--多核cpu中的java/.net/php/c++编程

    paip.提升性能--多核cpu中的java/.net/php/c++编程 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http ...

  10. Eclipse中java向数据库中添加数据，更新数据，删除数据

    前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) package com.ning ...