实现效果: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. php创建对象。真!变!态!

    PHP创建类的方式,真是够变态,以下是创建方式: 假设类: class SomeClass {//....} 创建对象: 1.直接通过类名实例化 $obj1 = new SomeClass(); 这种 ...

  2. git问题:git提交的时候总是提示key加载失败,总是需要手工将key加到Pageant中

    问题描述: 重装过一次系统,在重装之前git+tortoisegit配合很好,提交的时候都能自动加载ppk,但是重装系统后,也重新生成pulic key上传到了服务器,但是每次提交的时候都提示key加 ...

  3. git 清除历史

    http://stackoverflow.com/questions/9683279/make-the-current-commit-the-only-initial-commit-in-a-git- ...

  4. Docker使用Dockerfile创建支持ssh服务自启动的容器镜像

    原文链接:Docker使用Dockerfile创建支持ssh服务自启动的容器镜像 1. 首先创建一个Dockerfile文件.文件内容例如以下 # 选择一个已有的os镜像作为基础 FROM cento ...

  5. C#元祖Tuple的事例

    数组合并了同样类型的对象.而元祖合并了不同类型的对象.元祖起源于函数编程语言(F#) NET Framework定义了8个泛型Tuple(自NET4.0)和一个静态的Tuple类,他们作用元祖的工厂, ...

  6. ThinkPHP分页实例

    ThinkPHP分页实例 (2014-09-20 15:34:36)   很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看. ...

  7. 【Objective-C】06-点语法

    前言 在Java中,我们可以通过"对象名.成员变量名"来访问对象的公共成员变量,这个就称为"点语法".比如: 1.在Student类的第2行定义了一个公共的成员 ...

  8. TDS协议解析

    文章来自:http://freetds.cvs.sourceforge.net/*checkout*/freetds/freetds/doc/tds.html 该网站是免费的专门介绍TDS协议的,网址 ...

  9. 利用:header匹配所有标题做目录

    1.问题背景 查找到h1-h6,并遍历它们,打印出内容 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset= ...

  10. 拉格朗日乘子法(Lagrange multiplier)和KKT条件

    拉格朗日乘子法: KKT条件: