/**

  * 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. javascript 设计模式-----外观模式

    外观模式是为外部提供简单的接口一种方式,由于模块内部方法庞杂,不能一一对外公开,那么我们需要一个统一的和简单的对外方法(API)来调用这些内在的函数.这时候我们可以用到外观模式: var module ...

  2. java 多线程（daemon）

    package com.example; public class App { public static void main(String[] args) { DoDaemon d1 = new D ...

  3. Java设计模式2：简单工厂模式

    简单工厂模式 简单工厂模式是类的创建模式,又叫做静态工厂方法模式.简单工厂模式由一个工厂对象决定生产出哪一种产品类的实例. 为什么要使用简单工厂模式 原因很简单:解耦. A对象如果要调用B对象,最简单 ...

  4. Alpha阶段冲刺项目总结（补充）

    Alpha阶段冲刺阶段总结(补充) 此篇博客为"作业七:Alpha版本冲刺阶段" 与 "作业八:Alpha阶段项目总结" 的总结版. 一.项目预期计划vs实际进 ...

  5. Unity3D骨骼动画的分解（CleanData.Ani详解）

    CleanData是什么 CleanData以前没有特定的名字,(在easydown这个开源项目中,作为一个GameObjParser模块存在).在某三国项目中,我们使用GameObjParser将N ...

  6. [stm32] STM32 Interrupts and events 系统了解（EXTI）及槽型光电开关tp850电路研究

    中断和事件 1 嵌套向量中断控制器 特性: ● 68个可屏蔽中断通道(不包含16个Cortex™-M3的中断线):● 16个可编程的优先等级(使用了4位中断优先级):● 低延迟的异常和中断处理:● 电 ...

  7. [翻译]AKKA笔记 - LOGGING与测试ACTORS -2 (二)

    3.THROW IN A LOGBACK.XML 现在我们把SLF4J日志配置在logback. <?xml version="1.0" encoding="UTF ...

  8. ios 截屏

    把当前屏幕作为获取成为图片 - (UIImage *)rn_screenshot {    UIGraphicsBeginImageContext(self.bounds.size);    [sel ...

  9. Java-类和对象基础练习

    1．创建一个三角形类,成员变量三边,方法求周长,创建类主类A来测试它. package liu0919; public class Sanjiao { public double z(double a ...

  10. 说说设计模式~观察者模式(Observer)

    返回目录 观察者模式,也叫发布/订阅模式(publish/subscribe),监视器模式等.在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼 ...