/**

  * 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. 算法：x的n次方

    该题是用来公司教学,并无难度.用于说明算法效率差异以及循环和递归的效率差别. package practice; import java.math.BigDecimal; /** * @author ...

  2. Backbone源码解析（一）：Event模块

    Backbone是一个当下比较流行的MVC框架.它主要分为以下几个模块: Events, View, Model, Collection, History, Router等几大模块.它强制依赖unde ...

  3. 人人都是 DBA（XIII）索引信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  4. 【读书笔记】Html5游戏开发

    一直对HMTL5做游戏饶有兴趣,而这本书刚好就是HTML5 2游戏初级入门的书.Demo简单注释详细,可以拿来练练手,一个星期左右就可以读完.若要追求酷炫高大上效果,这本书恐怕要让你失望了.但作为上手 ...

  5. 在cocos2dx和unity3d之间选择

    人生最纠结的事,莫过于有选择………… cocos2dx和unity3d从某种意义上讲,都很不错.但当面对特定需求以及团队情况的时候,总是能分出高下的. 假设,目标游戏是一款类似 刀塔传奇 的游戏 我们 ...

  6. 在github上写个人简历——最简单却又不容易的内容罗列

    前篇博客分享了一下自己初入github的过程,傻瓜式一步步搭建好主页后,终于该做正事儿了——写简历.在脑袋中构思了很多版本,最后终于决定,先写一个最传统的版本,于是我在箱子中翻出我word版本的简历, ...

  7. C# Azure 存储-分布式缓存Redis的新建&配置&查看

    1. 介绍 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键包括 string,hash,l ...

  8. EF架构~在global.asax里写了一个异常跳转，不错！

    回到目录 一般地,网站出现异常后,我们会通过设置web.config的方法来实现友好页的显示,这个方法比较常用,但捕捉的信息不是很具体,在程序测试阶段,我们可以通过global.asax来实现友好的, ...

  9. lua表排序

    对于lua的table排序问题,一般的按照value值来排序,使用table.sort( needSortTable , func)即可(可以根据自己的需要重写func,否则会根据默认来:默认的情形之 ...

  10. [Java面试二]Java基础知识精华部分.

    一:java概述(快速浏览): 1991 年Sun公司的James Gosling等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名 ...