1.HTML结构：

<head>

<script type="text/javascript" src="../jquery-1.8.3/jquery.js"></script>

</head>

<body>

　　<div class="banner">

　　　　<ul class="img">

　　　　　　<li><a href=""><img src="img/01.jpg" alt="1"></a>

　　　　　　<li><a href=""><img src="img/02.jpg" alt="2"></a>

　　　　　　<li><a href=""><img src="img/03.jpg" alt="3"></a>

　　　　　　<li><a href=""><img src="img/04.jpg" alt="4"></a>

　　　　</ul>

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

　　　　<div class="btn btn_left">&lt</div>
            <div class="btn btn_right">&gt</div>

　　</div>

</body>

2.css样式：

 *{margin:;padding:;list-style: none;}

             .banner{margin:100px auto;border:5px solid #000;width:690px;height:690px;overflow: hidden;

             position:relative;}

             .banner .img{width:5000px;position: absolute;left:;top:;}

             .banner .img li{float:left;}

             .banner .num{position: absolute;width:100%;bottom:10px;left:;font-size:;text-align: center;}

             .banner .num li{width:10px;height:10px;background-color:#888;border-radius: 50%;

             display: inline-block;margin:0px 3px;cursor: pointer;}

             .banner .num li.on{background-color:#f60;}

             .banner .btn{width:50px;height:60px;background:rgba(0,0,0,0.5);position:absolute;top:50%;margin-top:-25px;

             font-size:40px;line-height:50px;text-align: center;color:#fff;font-family: "宋体";}

             .banner .btn_left{left:;}

             .banner .btn_right{right:;}

3.jQuery结构：

 $(function(){                 var i=0;

                 //将第一张复制

                 var clone=$(".banner .img li").first().clone();

                 //然后粘贴

                 $(".banner .img").append(clone);

                 //size()被length取代

                 var size=$(".banner .img li").length;

                 for(var j=0;j<size-1;j++){

                     $(".banner .num").append("<li></li>");

                 }

                 $(".banner .num li").first().addClass("on");

                 //鼠标划入圆点

                 $(".banner .num li").hover(function(){

                     //获取当前元素的索引值

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

                     i=index;

                     $(".banner .img").stop().animate({left:-index*690},500)

                     $(this).addClass("on").siblings().removeClass("on");

                 })

                 //自动轮播

                 var t=setInterval(

                     moverl,2000)

                 //鼠标移入定时器被关闭

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

                     clearInterval(t);

                 },function(){

                     t=setInterval(moverl,2000)

                 })

                 //向左的按钮点击事件

                 $(".banner .btn_left").click(function(){

                     moverl();

                 })

                 //封装函数

                 function moverl(){

                     i++;

                     if(i==size){

                         $(".banner .img").css({left:});

                         i=1;

                     }

                     $(".banner .img").stop().animate({left:-i*690},500)

                     if(i==size-1){

                         $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");

                     }else{

                         $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

                     }

                 }

                 $(".banner .btn_right").click(function(){

                     moverr();

                 })

                 function moverr(){

                     i--;

                     if(i==-1){

                         //索引从0开始

                         $(".banner .img").css({left:-(size-1)*690});

                         i=size-2;

                     }

                     $(".banner .img").stop().animate({left:-i*690},500)

                     $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

                 }

             })

jquery左右切换的无缝滚动轮播图的更多相关文章

  1. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  2. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  3. js原生选项卡（包含无缝滚动轮播图）一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  4. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  5. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  6. JS---案例：无缝的轮播图

    案例:无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  7. 原生无缝Banner轮播图

    话不多说,先展示效果图.由于录制工具,稍显卡顿,实际是流畅的.可以看到实现了无缝轮播,鼠标悬停,点击左右上下按钮切换Banner的功能,如图1所示. 图1 原生无缝banner效果展示 以我这个轮播图 ...

  8. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  9. 用jQuery实现简单的简单的轮播图

    图片来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. [leetcode-606-Construct String from Binary Tree]

    You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

  2. android怎么输出信息到logcat

  3. php 时间戳转化成天数 四舍五入 整数

    public function edit() { global $_W; global $_GPC; $openid=$_W['openid']; $boards = pdo_fetchall('se ...

  4. 第一章：pip 安装 tar.gz 结尾的文件 和 .whl 结尾的文件

    1. 假如后缀中还有 .tar.gz 的文件通过 pip 命令进行安装步骤. .单击 .tar.gz结尾的文件,并且对文件进行解压,进入到解压目录中,通过python命令进行安装. 命令如下:在dos ...

  5. Python使用QRCode生成二维码

    PIL和QRCode下载地址: http://www.pythonware.com/products/pil/ https://pypi.python.org/pypi/qrcode/5.1 #你可能 ...

  6. Go学习笔记（一）Let's 干吧

    加 Golang学习 QQ群共同学习进步成家立业 ^-^ 群号:96933959 简介     Go是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识 ...

  7. java Semaphore的介绍和使用

    一个计数信号量.从概念上讲,信号量维护了一个许可集.如有必要,在许可可用前会阻塞每一个 acquire(),然后再获取该许可.每个 release() 添加一个许可,从而可能释放一个正在阻塞的获取者. ...

  8. 深入 HTML5 Web Worker 应用实践：多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  9. FineReport单元格扩展与父子格设置

    1.描述 在讲述报表设计之前,首先介绍一下FineReport报表制作的几个基本概念,本章节介绍FineReport报表赖以生存的单元格扩展. 扩展,顾名思义,就是由一变多,那么单元格扩展就是指在we ...

  10. static 还是readonly 还是static readonly

    一.   static 多对象共享一段空间,或者说没有对象概念,就是类的概念,不需要实例化,自动被创建.多用于长期共享.不会为对象的创建或销毁而消失. public class C { ) publi ...