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

随机推荐

iOS开发之--单个页面禁止右滑返回操作
禁止右滑: if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) ...
MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk. Commands that may modify the data set are disabled, because this instance is configured to report e
早上来到公司,线上的项目报错: Error in execution; nested exception is io.lettuce.core.RedisCommandExecutionExcepti ...
Timeline Storyteller 现已加入自定义图表库
前言下载地址: https://store.office.com/en-us/app.aspx?assetid=WA104381136&sourcecorrid=328f5e2b-e973- ...
Spring Security http标签的use-expressions="true"属性
如果声明为true,那么在access属性要用hasRole()这样写: <intercept-url pattern="/secure/extreme/**" access ...
cf954H
挖我自闭了这是什么东西啊. 给出一棵深度为的树,其中深度为的节点有个儿子.问树上的简单路径中长度在之间的每个有多少条. 表示对于在层的个节点,向下走步的方案数表示对于 ...
A Java back-end engineer's study notes
loveincode's notes 学习工作中的一些记录,收藏. 人气很高的链接库计算机基础相关笔记操作系统 , 编译原理 , 计算机网络 , 互联网协议... 常用数据结构与算法 Java 实 ...
关于图文转换的web工具
图文转换web服务提供的功能很简单,就是调用百度云提供的图文转换接口,将用户提供的图片中的文字识别返回给用户.具体功能就这个,但是该服务有用到以下的东西: 1.spring-boot web项目搭建 ...
mui 卡片视图遮罩蒙版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
9 个用于移动APP开发的顶级 JavaScript 框架【申明：来源于网络】
9 个用于移动APP开发的顶级 JavaScript 框架[申明:来源于网络] 地址:http://www.codeceo.com/article/9-app-javascript-framework ...
Android开发入门经典【申明：来源于网络】
Android开发入门经典[申明:来源于网络] 地址:http://wenku.baidu.com/view/6e7634050740be1e650e9a7b.html?re=view

jQuery图片无缝轮播

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

随机推荐

热门专题