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

随机推荐

Linux下常见命令
=============挂载和登陆命令======================================== Mount:挂载命令. 比方挂载光驱mount /dev/cdrom /mnt ...
利用Python写入CSV文件的方法
第一种:CSV写入中文 #! /usr/bin/env python # _*_ coding:utf- _*_ import csv csvfile = file('test.csv', 'wb') ...
iowait
https://www.cnblogs.com/fuyuanming/articles/6497005.html
redis出现错误：NOAUTH Authentication required.
出现认证问题,应该是设置了认证密码,输入密码既可以啦注意密码是字符串形式! 127.0.0.1:6379> auth "yourpassword" 127.0.0.1:63 ...
【Java核心技术】类型信息(Class对象反射动态代理)
1 Class对象理解RTTI在Java中的工作原理,首先需要知道类型信息在运行时是如何表示的,这是由Class对象来完成的,它包含了与类有关的信息.Class对象就是用来创建所有“常规”对象的,J ...
[原创]WB Android客户端架构总结：发WB工作队列设计
先简单说下需求,发一条WB包含多种类型,例如图片.视频.文字等,发送工作不能阻塞UI,工作队列易于扩展,方便优化. 几个重要的类: JobManager:统一管理Job列表,包括job的添加.启动.终 ...
cf 1132 F
区间dp.. 每次删一串相邻的一样的,问多少次删光. 感觉想的几乎是一样的怎么比赛时就过不了呢...一定是因为我挂机睡觉了考虑l和r相等,l和l+1相等,r和r-1相等这三种情况就行了..然后就是裸 ...
选择结构的三角关系Switch、Case、Default！！！
选择结构的三角关系Switch.Case.Default!!! 今天我们学习选择结构进化章节——Switch结构,他与if有什么区别呢? 相同点: 都是用来处理多分支条件的结构不同点: switch ...
JavaScript 世界万物诞生记
一. 无中生有起初,什么都没有.造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办?有一个声音说:不是有null嘛?另一个声音说:可是null代 ...
join算法分析
对于单条语句,explain看下key,加个索引多个条件,加复合索引 where a = ? order by b 加(a,b)的复合索引上面都是比较基本的,这篇我们分析一些复杂的情况--join ...

jQuery图片无缝轮播

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

随机推荐

热门专题