【JavaScript&jQuery】轮展图
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 轮播插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" style="width:500px;height:313px;margin:50px auto;">
<!-- 小圆点点击切换 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播的内容 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:image/1.jpg" width="500" height="313" alt="">
</div>
<div class="item">
<img src="data:image/2.jpg" width="500" height="313" alt="">
</div>
<div class="item">
<img src="data:image/3.jpg" width="500" height="313" alt="">
</div>
</div>
<!-- 左右按钮点击切换 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev" style="width:10%">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next" style="width:10%">›</a>
</div>
<script type="text/javascript">
$(function(){
$('#myCarousel').carousel({
interval: 3000 // 默认5s
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<!--当前页面的三要素-->
<title>图片切换</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
img{border:none;}
ul li{list-style:none;}
/*背景 start*/
.bg{width:100%;height:300px;background:#a534d6;position:relative;}
/*背景图片 start*/
.b_img{width:760px;height:300px;overflow:hidden;margin:50px auto;}
/*背景图片 end*/
/*图片下方的按钮 start*/
.bg .nav{position:absolute;bottom:10px;left:46%;background:#000;opacity:0.5;filter:alpha(opacity=50);border-radius:25px;}
.bg .nav ul{display:inline-block;padding:5px 9px;}
.bg .nav ul li{float:left;width:10px;height:10px;border:1px solid #fff;border-radius:10px;margin:0 5px;}
.bg .nav ul .select{background:#fff;}
.bg .btn{width:46px;height:70px;background:url("images/icon.png");position:absolute;display:none;}
.bg .show{display:block;}
.bg .b_pre{top:40%;left:300px;background-position:49px 0px;}
.bg .b_next{top:40%;left:1014px;background-position:0px 309px;}
/*图片下方的按钮 end*/
/*背景 end*/
</style>
</head>
<body>
<div class="bg">
<ul class="b_img">
<li>
<a href="#">
<img src="data:images/banner-1.jpg" width="760" height="300" alt=""/>
</a>
</li>
<li>
<a href="#">
<img src="data:images/banner-2.jpg" width="760" height="300" alt=""/>
</a>
</li>
<li>
<a href="#">
<img src="data:images/banner-3.jpg" width="760" height="300" alt=""/>
</a>
</li>
<li>
<a href="#">
<img src="data:images/banner-4.jpg" width="760" height="300" alt=""/>
</a>
</li>
<li>
<a href="#">
<img src="data:images/banner-5.jpg" width="760" height="300" alt=""/>
</a>
</li>
</ul>
// 为了使过渡更和谐
<div class="nav">
<ul>
<li class="select" data-color="#a534d6"></li>
<li data-color="#6365ce"></li>
<li data-color="#4a4d9c"></li>
<li data-color="#523484"></li>
<li data-color="#009ee7"></li>
</ul>
</div>
<a href="#" class="btn b_pre"></a>
<a href="#" class="btn b_next"></a>
</div>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 定义一个按钮的索引
var index = 0;
// 定义一个是否播放的属性，因为要判断鼠标停留在图片上的时候停止播放
var play_setInterval = null;
// 开始自动切换
auto_banner();
// 按钮的显与隐
$(".bg").mouseover(function(){
$(".btn").addClass("show");
// 鼠标划在上面时候停止播放
clearInterval(play_setInterval);
}).mouseout(function(){
$(".btn").removeClass("show");
auto_banner();
});
// 第一种：下标与图片联动
// 先是做下标动
$(".nav").find("li").mouseover(function(){
// this 表示当前的li；siblings是他的兄弟元素，没有select就add；有就remove
$(this).addClass("select").siblings().removeClass("select");
// 图片的下标的联动的
// 第一条件就是获取图片的下标
var _index = $(this).index();
// 因为要下标和按钮对应
index = _index;
// 第二条件就是让图片根据下标消失
$(".b_img").find("li").eq(_index).fadeIn(1000).siblings().hide();
// 如果背景图片是白色；在切换过程中会有刺眼的感觉，所以要在切换过程中更改背景颜色
// 获取背景颜色
var _background = $(this).data("color");
// 通过css样式更改背景颜色
$(this).parents(".bg").fadeIn(1000).css("background",_background);
});
// 第二种：按钮与图片联动
// 既然是按钮；就是需要点击(前进按钮)
$(".b_next").click(function(){
// 每点击一次，索引值加一
index ++;
// 索引长度 注意是length而不是length()
var _length = $(".nav").find("li").length;
// 当索引值大于索引长度的时候归零
if (index >= _length){index = 0;}
// 点击按钮图片切换
$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
// 点击按钮图片背景切换
var _background = $(".nav").find("li").eq(index).data("color");
$(this).parents(".bg").fadeIn(1000).css("background",_background);
// 点击按钮下标切换
$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
});
// 后退按钮
$(".b_pre").click(function(){
index --;
var _length = $(".nav").find("li").length;
if (index <0){index = _length - 1;}
$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
var _background = $(".nav").find("li").eq(index).data("color");
$(this).parents(".bg").fadeIn(1000).css("background",_background);
$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
});
// 自动切换
function auto_banner(){
var _length = $(".nav").find("li").length;
play_setInterval = setInterval(function(){
if(index > _length){index = _length; }
$(".b_img").find("li").eq(index).fadeIn(1000).siblings().hide();
var _background = $(".nav").find("li").eq(index).data("color");
$(".bg").fadeIn(1000).css("background",_background);
$(".nav").find("li").eq(index).addClass("select").siblings().removeClass("select");
if(index == _length){index = 0;}
else{index ++; }
},2000);
};
});
</script>
</body>
</html>
【JavaScript&jQuery】轮展图的更多相关文章
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- jQuery轮播图（二）利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- jquery 轮播图实例
实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...
- 《第31天：JQuery - 轮播图》
源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...
- jquery 轮播图
slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...
随机推荐
- 【LG4841】城市规划
[LG4841]城市规划 题面 洛谷 题解 记\(t_i\)表示\(i\)个点的无向图个数,显然\(t_i=2^{C_i^2}\). 设\(f_i\)表示\(i\)个点的无向连通图个数,容斥一下,枚举 ...
- MSP430的JTAG接口和BSW接口
1.JTAG口,JTAG引脚如下定义: 单片机TCK——测试时钟输入,接仿真器7脚 单片机TDI——测试数据输入,接仿真器2脚 单片机TDO——测试数据输出,接仿真器1脚 单片机TMS——测试 ...
- elasticsearch对某段时间范围内按时间间隔进行统计
{ "query" : { "constant_score" : { "filter" : { "range" : { ...
- logstash处理@timestamp时区
input { stdin { } } filter { #ruby { # code => "event.set('timestamp', event.get('@timestamp ...
- 一、EnterpriseFrameWork框架总体介绍
EnterpriseFrameWork框架是自己在工作之余的得意之作,经过了几年时间的不断重构,现在终于有了现在的样子:刚开始只是为了方便开发WEB系统,随着项目越做越多,新的功能也就不断补充进去,补 ...
- fastdfs+nginx+image_filter安装与生成缩略图
fastdfs简介 类似google FS的一个轻量级分布式文件系统,纯C实现,支持linux.FreeBSD等UNIX系统: 只能通过API访问,不支持POXIS: 文件不分块存储,上传的文件和OS ...
- Python 深浅复制
(一)浅复制 复制列表最简单的方式是使用内置类型的构造方法: >>> l1 = [1, [2, 3], (4, 5)] >>> l2 = list(l1) > ...
- Python 装饰器Decorator(二)
对于上一篇“”Python闭包“”随笔中提到的make_averager()函数的如下实现,我们把历史值保存在列表里,每次计算平均值都需要重新求和,当历史值较多时,需要占用比较多的空间并且效率也不高. ...
- ES6的新特性（14）——Iterator 和 for...of 循环
Iterator 和 for...of 循环 Iterator(遍历器)的概念 JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Ma ...
- centos上搭建git服务--2
在 Linux 下搭建 Git 服务器 环境: 服务器 CentOS6.6 + git(version 1.7.1)客户端 Windows10 + git(version 2.8.4.window ...