jQuery图片无缝轮播

<!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图片无缝轮播的更多相关文章

jQuery图片无缝轮播插件；
图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...
js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...
js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便还有非常有逼格的 ...
记一个jquery 无缝轮播的制作方法
接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...
Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果进入正 ...

随机推荐

npm太慢，修改npm镜像
今天晚上想要将clone下来的项目进行npm install,但是等了半天都没动查看源 npm config get registry 或 npm config list https://regis ...
并发编程（CountDownLatch使用）
一.简介: Latch意思是:门闩的意思,形象的来说await就是拴上门闩,等到门闩释放后当前线程开始工作. 下面是来自简书上的解释: CountDownlatch是一个多功能的同步工具,可以被用于各 ...
xdebug php 运行效率分析工具
Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 官网:https://xdebug.org/index.php 安装方法: ht ...
poj 3348
裸的凸包,,我就来粘一下板子把jls和dls的代码混合了一下(雾),感觉我要是能把camp里的几何掌握的差不多就稳了.(mxy到底打了什么?) 感觉叉积实在是个好东西qwq 今晚c ...
hello 2019 D
一开始sb了考虑总的因子疯狂T,做题太少了...没意识到会有辣么多因子... 神仙说1e9以内的最多的就有800个因子的了... 然后我们可以考虑质因子我觉得已经说得很明白了... 唔逆元好像exg ...
JAVA课程之简易课程登记
实现技术JSP+Servlet+MySQL 思想:首先前台用jsp获取数据,然后用Form表单传值给Servlet,Servlet操作MySQL,获取数据再通过jsp显示 1.jsp功能选择界面 &l ...
java学习之路--集合基础之List和Set部分
List 一个接口,它继承于Collection的接口.它代表着有序的队列.里面的元素是有序的,可以重复,因为该集合的体系有索引. List的实现类 ArrayList:底层数据结构为数组数据结构,特 ...
zepto.js的touch模块
touch库实现了什么和引入背景 touch模块是基于zepto.js的. click事件在移动端上会有 300ms 的延迟,同时因为需要长按 , 双触击等富交互,所以我们通常都会引入类似 ze ...
C++中类型（理解）
long long类型转载:https://blog.csdn.net/junecau/article/details/6766033 在做ACM题时, 经常都会遇到一些比较大的整数.而常用的内置整 ...
GIT 身份验证失败问题解决方案，由于修改密码产生的问题
fatal: Authentication failed for 'http:xxxxxxxxxx.git/' 解决方案 1. git config --global user.name " ...

jQuery图片无缝轮播

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

随机推荐

热门专题