实现效果：1、图片每2秒钟切换1次。

2、当鼠标停留在整个页面上时，图片不进行轮播。

3、当点击右下角的小球时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。

4、当图片发生轮播切换时，在不点击小球前提下，相应的小球背景颜色也自动发生变化。

index.html

<!DOCTYPE html>

<html>

<head>

    <title>jQuery实现轮播图</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script src="js/jquery-1.12.4.min.js"></script>

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

</head>

<body>

<div class="main">

<h3>jQuery实现轮播图</h3>

<!-- 图片轮播 -->

    <div class="banner">

        <img src="img/1.jpg" />

        <img src="img/2.jpg" />

        <img src="img/3.jpg" />

        <img src="img/4.jpg" />

        <img src="img/5.jpg" />

    <!-- 上一张、下一张按钮 -->

    <a href="javascript:void(0)" class="button prev"></a>

    <a href="javascript:void(0)" class="button next"></a>

         <!-- 圆点导航 -->

    <div class="dots">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>

    </div>

</div>

</body>

</html>

style.css

*{margin:;padding:;}

body{font-family: " Microsoft YaHei";}

.main{margin:30px auto;width:1200px;text-align: center;}

h3{text-align: center;width:1200px;position: relative;}

/*banner图*/

.banner{width:1200px; height:460px;overflow: hidden;margin-top: 30px;position: relative;border: 10px solid #bbb; }

.banner img{vertical-align: bottom;position: absolute;top:;left:;/*display: none;*/}

/*.banner img.slide-active{display: block;}*/

/*切换按钮*/

.button{position: absolute;width:40px;height:80px;left:;top:50%;margin-top:-40px;}

.prev{background:url(../img/pre2.png) no-repeat center center;}

.next{left: auto;right:;background:url(../img/pre.png) no-repeat center center;}

.button:hover{background-color: #333;opacity: 0.6;filter: alpha(60);}

/*切换小圆点*/

.dots{position: absolute;right:;bottom: 20px;text-align: right;margin-right: 20px;}

.dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;line-height:12px;background-color: rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.9) inset;margin-right: 8px;cursor: pointer;}

.dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background-color: #fff;}

script.js

$(document).ready(function(){

    var t,count,

        index=0,

        len=$(".banner img").length;

    //  初始化状态，在第一张

    $(".banner img:not(:first-child)").hide();

    $(".dots span:first-child").addClass("active");

   // 滑过鼠标清除定时器,滑开继续

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

        clearInterval(t);

    },

    function(){

        t=setInterval(showAuto, 2000);

    });

    //点击小圆点跳转到相应页面并且小圆点样式随之改变

    $(".dots span").click(function(){

      count=$(this).index();//获取当前点击对象的id属性值

      changOption(count);

    });

    //清除定时器

    if(t){

        clearInterval(t);

        t=null;

    }

    // 每隔两秒自动轮播

    t=setInterval(showAuto, 2000);

    //点击按钮切换

    $(".prev").click(function(){

        count=$(".active").index();

        count--;

        if(count < 0){count=len-1;}

        changOption(count);

    });

    $(".next").click(function(){

        count=$(".active").index();

        count++;

        if(count > len-1){count=0;}

        changOption(count);

    });

// 封装自动切换的showAuto函数

function showAuto(){

        index++;

        if(index > len-1){index=0;}

    changOption(index);

}

//封装点击小圆点改变背景及自身样式的changeOption()函数

function changOption(curIndex){

   $(".dots span").siblings().removeClass("active");//查找其他子节点并移除类

   $(".dots span").eq(curIndex).addClass("active");//给当前点击的对象添加类

   $(".banner img").filter(":visible").hide().parent().children().eq(curIndex).show();

   index=curIndex;

}

});

jquery 轮播图实例的更多相关文章

  1. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  2. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  3. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  4. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  5. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  6. 《第31天：JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  7. 前端基础功能，原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

  8. jquery 轮播图

    slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...

  9. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. easyui 动态加载语言包

    解决办法是:把语言包中的语言类型写到cookie,动态修改cookie中的语言名称,修改完后重新渲染一下页面. 在页面加载完成后,先判断cookie存不存在,如果不存在就写入默认语言,存在就给easy ...

  2. poj 3017 Cut the Sequence（单调队列优化 ）

    题目链接:http://poj.org/problem?id=3017 题意:给你一个长度为n的数列,要求把这个数列划分为任意块,每块的元素和小于m,使得所有块的最大值的和最小 分析:这题很快就能想到 ...

  3. 前端点击删除按钮删除table表格的数据

    table.on('tool(hostTable)', function (obj) { var data = obj.data;//须写 if (obj.event === 'del') { var ...

  4. java中的锁池和等待池

    在java中,每个对象都有两个池,锁(monitor)池和等待池 wait() ,notifyAll(),notify() 三个方法都是Object类中的方法. 锁池:假设线程A已经拥有了某个对象(注 ...

  5. javascript断点设置和调试

    JS调试必备的5个debug技巧http://www.jb51.net/article/47812.htm Chrome 中的 JavaScript 断点设置和调试技巧http://www.xuebu ...

  6. lseek，fcntl，ioctl函数

    函数说明:每一个已打开的文件都有一个读写位置, 当打开文件时通常其读写位置是指向文件开头, 若是以附加的方式打开文件(如O_APPEND), 则读写位置会指向文件尾. 当read()或write()时 ...

  7. winform播放音乐

    string sound = Application.StartupPath +@"\song\123.wav"; //Application.StartupPath:程序exe所 ...

  8. linux学习笔记10---命令nl

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号! nl命令读取 file 参数(缺省情况下标准输入),计算输入中的行号,将计算过的行号写入标准输出.在输出中,n ...

  9. SlidingMenu.jar 抽屉使用,避免了使用libaray的不兼容的尴尬

         尽管说这个东西出来了一段时间了,可是好东西还是要分享一下的. 之前我们使用的都是libaray.各种出错.团队开发也不好操作.不知道 哪个好心人干脆把这个工具封装成一个jar,真心为你点赞. ...

  10. cocos2dx 富文本框，支持换行，支持神情（支持汉字截断无乱码）

    cocos2dx 富文本框,支持换行,支持表情(支持汉字截断无乱码) 小工在做了一个游戏聊天功能,里面用到插入表情的富文本和换行的问题: 先看效果,不是你要的效果,可return:(截图由于:输入的问 ...