<!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. MySql.Data.dll官网下载

    Mysql.Data.dll官网下载 在项目开发中链接MySQL数据库经常要用到Mysql.Data.dll,网上虽然有很多,但是还是比较信赖官网的 今天就从官网下载一次记录一下过程 1.下载地址 官 ...

  2. npm install 错误 安装 chromedriver 失败的解决办法

    npm 安装 chromedriver 失败的解决办法npm 安装 chromedriver 时,偶尔会出错,错误提示类似于:npm ERR! chromedriver@2.35.0 install: ...

  3. mui---获取设备的网络状态

    在用mui做音乐或视频播放器的时候,往往会考虑当前音乐+视频的播放环境.例如是4G ,WIFI,无网络,给出特定的提示: 具体做法:根据 getCurrentType来进行获取当前网络的类型: plu ...

  4. 公司中springcloud项目遇到的问题

    1.更改maven的.m2下的settings.xml文件,程序就可以运行,是不是很神奇?

  5. react material-ui 添加jss插件

    jss.config.js import { create } from "jss"; import preset from "jss-preset-default&qu ...

  6. 16-1 ECMA5与ECMA6的函数定义

    ECMA5: function Drag(id){ this.ele = document.getElementById(id); var that = this; this.ele.onmoused ...

  7. 关于IOC和DI

    IoC (Inverse of Control)即控制反转.是指将原来程序中自己创建实现类对象的控制权反转到IOC容器中.只需要通过IOC获了对象的实例,将IOC当成一个黑盒子.工厂.容器. spri ...

  8. ajax获取后台数据渲染(整片文章不分段落)解决方案,要使用htmL方式输出

    方案一:使用 HTML pre tag<div class="content"><pre> {{ text_data }}</pre></ ...

  9. 再次重温《Right here waiting》

    记得高中时候听到这首曲子(当时还让同桌帮我抄了这首曲子,后来这个本子也不知道扔到哪里去了), 前天偶尔在虾米遇到这首曲子,过去的青涩岁月历历在目,自己手动打打歌词,一方面是为了重温这首曲子,另一方面, ...

  10. liunx系统问题总结

    1.Unable to locate package错误      解决办法 :输入命令 sudo apt-get update,进行软件的更新