/**

  * 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. java提高篇(五)-----抽象类与接口

    接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念 ...

  2. [专业名词·硬件] 2、DC\DC、LDO电源稳压基本常识（包含基本原理、高效率模块设计、常见问题、基于nRF51822电源管理模块分析等）·长文

    综述先看这里 第一节的1.1简单介绍了DC/DC是什么: 第二节是关于DC/DC的常见的疑问答疑,非常实用: 第三节是针对nRF51822这款芯片电源管理部分的DC/DC.LDO.1.8的详细分析,对 ...

  3. 简化工作流程，10款必备的HTML5开发工具

    利用HTML5工具不仅可以帮助设计师和开发者创建更具吸引力的网站,还能增加网站的可用性和可访问性.本文收集了10款HTML5开发工具让你在网页中搭建特效.动画.视频.音频等诸多功能,为你节省更多开发时 ...

  4. 与其他.Net异步模式和类型进行互操作

    返回该系列目录<基于Task的异步模式--全面介绍> Tasks和异步编程模型APM(Tasks and the Asynchronous Programming Model) 从APM到 ...

  5. 我也说百度和google

    对于程序员,最好的老师恐怕还是百度或者google或一些专业的it社区.网站了罢! 之前曾听到这样的一句话, 文艺程序员用Google Scholar/Scirus/stackoverflow.普通程 ...

  6. Composer使用

    是什么 如果你知道yum.apt-get.npm.bower等命令中的一种或者多种,那么,你也能很快知道composer是什么了.没错,它就是PHP里快速安装类库的.平时,我们安装一个PHP类库,需要 ...

  7. PHP面向对象04_串行化

    oop04复习 2014-9-3 10:48:45 要点: --1.克隆对象 --2.__toString( ) --3. __call( ) --4.自动加载类 --5.对象串行化 1.克隆对象以及 ...

  8. Android开发学习之路-Service和Activity的通信

    在很多时候,Service都不仅仅需要在后台运行,还需要和Activity进行通信,或者接受Activity的指挥,如何来实现,来看代码. 定义一个服务 // 创建一个服务,然后在onBind()中返 ...

  9. OutputCache属性详解（二）一 Location

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  10. Drupal网站开发实践系列

    这一系列文章会记录我最近一个项目的开发历程.包括用到的模块,功能的具体实现,调用的API,还有主题的制作,一部分前端信息等. 该网站基于Drupal7+Commerce制作,主题部分基本完全自定义,没 ...