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. VB6之截图

    今天先把主要逻辑写出来,如果有时间就实现一个真正的截图工具. Private Declare Function BitBlt Lib "gdi32" (ByVal hDestDC ...

  2. Unity3D-Shader-实现X光效果

    [旧博客转移 - 2016年1月3日 16:40 ] 最近学习了一些Shader效果,打算把学到的知识总结一下,这篇讲一下这种轮廓发光的效果(如下图所示),也有一些地方管这个叫X光     1.原理 ...

  3. 使用three.js加载3dmax资源，以及实现场景中的阴影效果

    使用three.js可以方便的让我们在网页中做出各种不同的3D效果.如果希望2D绘图内容,建议使用canvas来进行.但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果,更是不清楚到底如何导 ...

  4. 设计模式 - 观察者模式（JDK）

    定义:观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新. 对象:    抽象主题角色:每个抽象主题角色都可以有任意数量的观察者.抽象主题提供可 ...

  5. POJ 3041 Asteroids / UESTC 253 Asteroids（二分图最大匹配，最小点匹配）

    POJ 3041 Asteroids / UESTC 253 Asteroids(二分图最大匹配,最小点匹配) Description Bessie wants to navigate her spa ...

  6. 基于Centos开启samba服务

    1.安装samba服务: yum -y install samba samba-common samba-client2.查看samba服务状态: service smb status: 正常状态是: ...

  7. 利用HTML5判断用户是否正在浏览页面技巧

    现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务.同时还有新的document.hidde ...

  8. gtest 操作指南

    首先,下载gtest-17.0,CSDN上就可以免费下载. 然后,打开gtest-17.0下的msvc文件夹,运行gtest.sln,右键解决方案,选择生成解决方案,此时会在gtest-17.0/ms ...

  9. Selenium webdriver定位iframe里面元素两种方法

    以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...

  10. RxSwift 系列(六) -- Mathematical and Aggregate Operators

    前言 本篇文章将要学习RxSwift中数学和集合操作符,在RxSwift中包括了: toArray reduce concat toArray 将一个Observable序列转化为一个数组,并转换为一 ...