在此随笔之前，博主已经做过一次图片滑动轮播，如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果，就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果，这是很不美观的，当然也有网站是这样做。但博主参照过很多网站的图片轮播基本上都是无缝的（一张紧接着一张），所以博主也决定自己做一个。

做这个之前博主还在某客学院看了视频教程，此方法为纯jquery方法，比js混合jq方法易懂简洁所以有必要给大家分享一下

先上html代码以及css代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="jquery.js" type="text/javascript"></script>

<script src="ongradeanimationCtrl.js" type="text/javascript"></script>

<style type="text/css">

*{

    padding:0px;

    margin:0px;

    border:0px;

}

li{

    list-style-type:none;

}

a{

    text-decoration:none;

}

#wrapper{

    margin:0px auto;

    border:0px;

    padding:0px;

}

#show-area{

    width:800px;

    height:450px;

    position:relative;

    margin:0px auto;

    overflow:hidden;

}

#show-area ul{

    position:relative;

    width:4800px;

    height:450px;

    right:0;

}

#show-area ul li{

    float:left;

    width:800px;

}

#controler{

    width:120px;

    text-align:center;

    position:absolute;

    top:425px;

    left:370px;

    z-index:1;

}

#controler div{

    height:15px;

    width:15px;

    border-radius:100%;

    background-color:#ccc;

    float:left;

    margin-left:5%;

    opacity:0.9;/*透明度50%*/

    filter:Alpha(opacity=90);/*为了适应旧的浏览器*/

}

#button-left{

    /*display:none;*/

    color:#fff;

    position: absolute;

    top: 189px;

    left: 0px;

    width: 60px;

    height: 60px;

    z-index:2;

    background:url(images/left.jpg);

    border-radius:100%;

    background-size:cover;

    opacity:0.5;/*透明度50%*/

    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/

}

#button-right{

    /*display:none;*/

    color:#fff;

    position: absolute;

    top: 189px;

    left: 740px;

    width: 60px;

    height: 60px;

    z-index:2;

    background:url(images/right.jpg);

    border-radius:100%;

    background-size:cover;

    opacity:0.5;/*透明度50%*/

    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/

}

.onclick{

    background-color:#FFF !important;

}

</style>

</head>

<body>

<div id="wrapper">

  <div id="show-area">

     <ul>

       <li><a href="#"><img src="data:images/p1.jpg"></a></li>

       <li><a href="#"><img src="data:images/p2.jpg"></a></li>

       <li><a href="#"><img src="data:images/p3.jpg"></a></li>

       <li><a href="#"><img src="data:images/p4.jpg"></a></li>

     </ul>

      <div id="button-left" title="下一张"></div>

      <div id="button-right" title="上一张"></div>

    <div id="controler"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->

  </div>

</div>

</body>

</html>

jquery代码

$(function(){

   var i = 0;

   var imgWidth = $("#show-area ul li").width();

   var clone = $("#show-area ul li").first().clone();

   $("#show-area ul").append(clone);

   //复制第一张图片并且添加到最后达到无缝连接的效果

   var size = $("#show-area ul li").size();//得到所有li的个数

   /*第一步*/

   //一开始循环添加按钮

   for(var j = 0 ; j<size - 1 ; j++){

     $("#controler").append("<div></div>");   

   }
   //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
  //所以添加按钮的时候我们也应该添加4个按钮

   $("#controler div").eq(0).addClass("onclick");

   /*第二步*/

   //左按钮

   $("#button-left").click(function(){

      Toleft();

   })

   //右按钮

   $("#button-right").click(function(){

      Toright();

   })

   /*第3步*/

   //按钮移出移入事件

   $("#controler div").hover(function(){

    i = $(this).index();

    clearInterval(timer);

    $("#show-area ul").stop().animate({left:-i * imgWidth});

    $(this).addClass("onclick").siblings().removeClass("onclick");

    $("#index").html("index的值：" + index);

   },function(){

     timer = setInterval(function(){

     Toleft();    

   },3000)    

   })      

   //ul鼠标移出移入事件

   $("#show-area ul").hover(function(){

     clearInterval(timer);

   },function(){

      timer = setInterval(function(){

     Toleft();    

   },3000)     

   })

   //两个方向按钮鼠标移出移入事件

   $("#button-left,#button-right").mouseover(function(){

       clearInterval(timer);

   }).mouseout(function(){

     timer = setInterval(function(){

        Toleft();    

     },3000)

   })

   //定时器

   var timer = setInterval(function(){

     Toleft();    

   },3000)   

   /*第2.1步*/

   //左按钮实现的函数

   function Toleft(){

     i++;

     if(i==size){

        //当当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片）并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）

        $("#show-area ul").css({left:0});

        i = 1;

     }

     $("#show-area ul").stop().animate({left:-i*imgWidth},1000);

     if(i == size -1){

        $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick"); 

     }else{

       $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");      

    }

   }

   /*第2.2步*/

   //右按钮实现的函数

   function Toright(){

       //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来

      i--;

      if(i==-1){

         $("#show-area ul").css({left:-(size - 1)*imgWidth});

         i=size-2;    

      }

      $("#show-area ul").animate({left:-i*imgWidth},1000);

      $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); 

   }

});

【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮的更多相关文章

  1. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  2. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  3. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  4. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  5. jQuery插件实现左右无缝轮播

    前段时间学习jQuery的时候,在网上找了个SuperSlide插件,做轮播图demo,感觉对于新人而言,还是挺容易上手的,代码量也少. 直接贴代码吧. 1.HTML <!DOCTYPE htm ...

  6. 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  7. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  8. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  9. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. c# Dictionary的遍历和排序（转）

    c#遍历的两种方式 for和foreach for: 需要指定首位数据.末尾数据.数据长度: for遍历语句中可以改变数据的值: 遍历规则可以自定义,灵活性较高 foreach: 需要实现ienume ...

  2. 多种方式实现在Android 手机上抓包

    一.素材来源 https://www.zhihu.com/question/20467503 二.方法整理 2.1 方式1:Packet Capture + HTTP Injector 使用于在手机端 ...

  3. java web(二) Tomcat数据源

    一.数据源的产生 1.JDBC操作原理 (1) 加载数据库驱动程序(数据库驱动程序可通过classpath配置): Class.forName(); (2)通过DriverManager类取得数据库连 ...

  4. php读取html文件（或php文件）的方法

    一.使用fopen()函数   此函数主要传入的是头两个参数(第一个是文件地址,第二个是打开方式),可以读取任何一个文本文件,然后用while将fopen函数读取到的每一行数据循环输出.   如:   ...

  5. BootStrap 模态框基本用法

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...

  6. 过河问题nyoj47

    时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在漆黑的夜里,N位旅行者来到了一座狭窄而且没有护栏的桥边.如果不借助手电筒的话,大家是无论如何也不敢过桥去的.不幸的是 ...

  7. HDU1004之总是wa的细节问题

    #include <stdio.h> #include <string.h> int main() { ][]; int n, i, k, j, max, max_i; ){ ...

  8. java继承内部类问题（java编程思想笔记）

    普通内部类默认持有指向所属外部类的引用.如果新定义一个类来继承内部类,那“秘密”的引用该如何初始化? java提供了特殊的语法: class Egg2 { public class Yolk{ pub ...

  9. session生命周期

    session生命周期 原文链接:http://blog.sina.com.cn/s/blog_72c8c1150100qpgl.html 文中黄色字体为我的标记修改或添加 Session保存在服务器 ...

  10. java之接口（笔记）

    1.特征 (1)所有成员变量都是public, static, final.(2)所有方法都是public, abstract.(3)所有嵌套类型都是public, static. 2.接口也是继承自 ...