/**

  * 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. AMD加载器实现笔记（一）

    之前研究过AMD,也写过一篇关于AMD的文章<以代码爱好者角度来看AMD与CMD>.代码我是有看过的,基本的原理也都明白,但实际动手去实现却是没有的.因为今年计划的dojo教程<静静 ...

  2. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  3. [Voice communications] 让音乐响起来

    本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写.全部删除 ...

  4. Java提高篇（三六）-----Java集合细节（二）：asList的缺陷

    在实际开发过程中我们经常使用asList讲数组转换为List,这个方法使用起来非常方便,但是asList方法存在几个缺陷: 一.避免使用基本数据类型数组转换为列表 使用8个基本类型数组转换为列表时会存 ...

  5. JavaScript思维导图—数据类型

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

  6. IOS 推送-配置与代码编写

    IOS 推送配置与代码编写 这里介绍IOS的推送,本文章已经在IOS6/7/8上都能运行OK,按照道理IOS9应该没问题. 大纲: 1.文章前提 2.推送介绍 3.推送文件账号设置 4.推送证书介绍 ...

  7. Lua: 好的, 坏的, 和坑爹的

                                   好的       小巧: 20000行C代码 可以编译进182K的可执行文件 (Linux下).       可移植: 只要是有ANSI ...

  8. fir.im Weekly - Mobile developer 利器分享

    工欲善其事,必先利其器.本期 fir.im Weekly 推荐了很多优秀的 Github 项目.iOS/Android 开发工具利器,比如墨__守独立开发的macOS App -- Repo, 帮助 ...

  9. android sdk下载

    android sdk下载 所有的离线包都有 http://mirrors.neusoft.edu.cn/android/repository/

  10. 使用XSD校验Mybatis的SqlMapper配置文件(1)

    这篇文章以前面对SqlSessionFactoryBean的重构为基础,先简单回顾一下做了哪些操作: 新建SqlSessionFactoryBean,初始代码和mybatis-spring相同: 重构 ...