<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--<script src="js/jquery-1.10.2.min.js"></script>-->

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<title></title>

<style>

 *{

     margin: 0;

     padding:0;

     }

 ul{

     list-style: none;

     }

 .banner{

     width: 600px;

     height: 300px;

     border: 2px solid #ccc;

     margin: 100px auto;

     position: relative;

     overflow: hidden;

     z-index: 1;

     }

 .img{

     position: absolute;

     top: 0;

     left: 0;

     }

 .des{

     position: absolute;

     bottom: 0;

     left: 0;

     z-index: -2;

     background: #ccc;

     }

 .des li{

     float: left;

     width: 600px;

     }

 .img li{

     float: left;

     }

 .num{

     position: absolute;

     bottom: 10px;

     width: 100%;

     text-align: center;

     font-size: 0;

     }

 .num li{

     width: 10px;

     height: 10px;

     background:rgba(0,0,0,0.5);

     display: block;

     border-radius: 100%;

     display: inline-block;

     margin: 0 5px;

     cursor: pointer;

     }

 .btn{

     display: none;

     }

 .btn span{

     display: block;

     width: 50px;

     height: 100px;

     background: rgba(0,0,0,0.6);

     color: #fff;

     font-size: 40px;

     line-height: 100px;

     text-align: center;

     cursor:pointer;

     }

 .btn .prev{

     position: absolute;

     left: 0;

     top: 50%;

     margin-top: -50px;

     }

 .btn .next{

     position: absolute;

     right: 0;

     top: 50%;

     margin-top: -50px;

     }

 .num .active{

     background-color: #fff;

     }

 .hide{

     display: none;

     }

 </style>

</head>

<body>

 <div class="banner">

 <ul class="img">

 <li><a href="#"><img width="600" height="300" src="img/adver01.jpg" alt="第1张图片"></a></li>

 <li><a href="#"><img width="600" height="300" src="img/adver02.jpg" alt="第2张图片"></a></li>

 <li><a href="#"><img width="600" height="300" src="img/adver03.jpg" alt="第3张图片"></a></li>

 <li><a href="#"><img width="600" height="300" src="img/adver04.jpg" alt="第4张图片"></a></li>

 <li><a href="#"><img width="600" height="300" src="img/adver05.jpg" alt="第5张图片"></a></li>

 <li><a href="#"><img width="600" height="300" src="img/adver06.jpg" alt="第6张图片"></a></li>

 </ul>

 <ul class="num"></ul>

 <ul class="des">

 <li>1</li>

 <li>2</li>

 <li>3</li>

 <li>4</li>

 <li>5</li>

 <li>6</li>

 </ul>

 <div class="btn">

<span class="prev" onselectstart="return false;">&lt;</span>

 <span class="next" onselectstart="return false;">&gt;</span>

 </div>

</div>

<script>

    $(function(){

        var i=0;

        var timer=null;

        for (var j = 0; j < $('.img li').length; j++) { //创建圆点

            $('.num').append('<li></li>')

        }

        $('.num li').first().addClass('active'); //给第一个圆点添加样式

        var firstimg=$('.img li').first().clone(); //复制第一张图片

        $('.img').append(firstimg).width($('.img li').length*($('.img img').width()));

        //第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

        $('.des').width($('.img li').length*($('.img img').width())

    );

// 下一个按钮

 $('.next').click(function(){

      i++;

      if (i==$('.img li').length) {

          i=1;

          $('.img').css({left:0}); //保证无缝轮播，设置left值

      };

      $('.img').stop().animate({left:-i*600},300);

      if (i==$('.img li').length-1) { //设置小圆点指示

          $('.num li').eq(0).addClass('active').siblings().removeClass('active');

          $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');

      }else{

          $('.num li').eq(i).addClass('active').siblings().removeClass('active');

          $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');

      }

 })

 // 上一个按钮

 $('.prev').click(function(){

      i--;

      if (i==-1) {

          i=$('.img li').length-2;

          $('.img').css({left:-($('.img li').length-1)*600});

      }

      $('.img').stop().animate({left:-i*600},300);

      $('.num li').eq(i).addClass('active').siblings().removeClass('active');

      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');

 })

 //设置按钮的显示和隐藏

 $('.banner').hover(function(){

      $('.btn').show();

 },function(){

  $('.btn').hide();

 })

 //鼠标划入圆点

 $('.num li').mouseover(function(){

      var _index=$(this).index();

      $('.img').stop().animate({left:-_index*600},150);

      $('.num li').eq(_index).addClass('active').siblings().removeClass('active');

      $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');

 })

 //定时器自动播放

 timer=setInterval(function(){

      i++;

      if (i==$('.img li').length) {

          i=1;

          $('.img').css({left:0});

      };

      $('.img').stop().animate({left:-i*600},300);

      if (i==$('.img li').length-1) {

          $('.num li').eq(0).addClass('active').siblings().removeClass('active');

          $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');

      }else{

          $('.num li').eq(i).addClass('active').siblings().removeClass('active');

          $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');

      }

 },2000)

 //鼠标移入，暂停自动播放，移出，开始自动播放

 $('.banner').hover(function(){

      clearInterval(timer);

 },function(){

  timer=setInterval(function(){

      i++;

      if (i==$('.img li').length) {

          i=1;

          $('.img').css({left:0});

      };

      $('.img').stop().animate({left:-i*600},300);

      if (i==$('.img li').length-1) {

          $('.num li').eq(0).addClass('active').siblings().removeClass('active');

          $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');

      }else{

          $('.num li').eq(i).addClass('active').siblings().removeClass('active');

          $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');

      }

 },2000)

 })

 })

</script>

</body>

</html>

jQuery图片无缝轮播的更多相关文章

  1. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  2. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  4. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  5. 记一个jquery 无缝轮播的制作方法

    接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...

  6. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

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

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

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

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

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

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

随机推荐

  1. 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”的解决方案

    eclipse在其POM文件的一处提示出错如下: Plugin execution not covered by lifecycle configuration: org.apache.maven.p ...

  2. js---设置cookie的方法

    在客户端进行一些操作的时候,很多时候会要用到设置cookie的方法.具体的做法: <script type="text/javascript"> var documen ...

  3. 【登录异常解决】Ubuntu 输入正确的密码后重新返回到登陆界面

    症状 Ubuntu 输入正确的密码后,黑屏一闪,重新返回到登陆界面. 原因一:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...

  4. transform的兼容性写法浏览器 和 transition

    transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firef ...

  5. C++的一些知识

    1.C++中非虚函数都是静态绑定,虚函数是动态绑定.指针或引用访问对象的虚函数时才能进行动态绑定. 静态多态性:编译时确定操作的对象.如:函数重载,运算符重载. 动态多态性:运行时确定操作的对象. 绑 ...

  6. day16 十六、包、循环导入、导入模块

    一.包的概念 包:一系列模块的集合体.包通过文件夹管理一系列功能相近的模块 重点:包中一定有一个专门用来管理包中所有模块的文件 包名:存放一系列模块的文件夹的名字 包名(对象)存放的是管理模块的那个文 ...

  7. Luogu 1071 - 潜伏者 - [字符串]

    题目链接:https://www.luogu.org/problemnew/show/P1071 题解: 模拟就完事儿了. 注意failed的情况有:出现一个 $f[x]$ 对应多个值:存在两个不同的 ...

  8. [No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧

    对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debu ...

  9. Redis实战经验及使用场景

    随着应用对高性能需求的增加,NoSQL逐渐在各大名企的系统架构中生根发芽.这里我们将为大家分享社交巨头新浪微博.传媒巨头Viacom及图片分享领域佼佼者Pinterest带来的Redis实践,首先我们 ...

  10. luogu2839 [国家集训队]middle

    题目链接:洛谷 题目大意:给定一个长度为$n$的序列,每次询问左端点在$[a,b]$,右端点在$[c,d]$的所有子区间的中位数的最大值.(强制在线) 这里的中位数定义为,对于一个长度为$n$的序列排 ...