【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 ...
随机推荐
- RHSCA模拟考试
开始考试:桌面是个黑框子 点击reboot按钮,破解密码 开机成功,输入startx进入图形界面 不能复制,要在物理机用ssh root@172.25.0.11 远程连接,就可以复制粘贴了 * Hos ...
- 图论-求有向图的强连通分量（Kosaraju算法）
求有向图的强连通分量 Kosaraju算法可以求出有向图中的强连通分量个数,并且对分属于不同强连通分量的点进行标记. (1) 第一次对图G进行DFS遍历,并在遍历过程中,记录每一个点的退出顺序 ...
- Linux 删除用户时报错：userdel: user zhoulijiang is currently used by process 1
一.发现问题: 有技术人员离职,需要删除系统帐号,但是进行删除操作的时候报:" userdel: user zhoulijiang is currently used by process ...
- C#：通过NuGet程序包下载CefSharp来加载谷歌浏览器
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 首先我讲明一下我要做的,公司有个C# wpf的项目需要我把一个开发好的网页嵌入到客户端当中,由于种种原因,我放 ...
- Android 学习1
使用eclipse做为开发IDE, 导包快捷键 在显红的地方按shift+ctrl+o 另外自动补全使用alt+/
- 九、Django之ORM
一.ORM概述 用于实现面向对象编程语言里不同类型系统的数据之间的转换,换言之,就是用面向对象的方式去操作数据库的创建表以及增删改查等操作. 到目前为止,当我们的程序涉及到数据库相关操作时,一般操作流 ...
- 在腾讯云上安装mysql遇到的问题
卸载mysql: 1.sudo apt-get autoremove --purge mysql-server-5.5 5.5 是数据库版本, mysql -v 显示版本信息 2.sudo apt-g ...
- Android 测试 之MonkeyRunner
一.什么是MonkeyRunner monkeyrunner工具提供了一个API,使用此API写出的程序可以在Android代码之外控制Android设备和模拟器.通过monkeyrunner,您可以 ...
- 牛客网暑期ACM多校训练营（第四场）：A Ternary String（欧拉降幂）
链接:牛客网暑期ACM多校训练营(第四场):A Ternary String 题意:给出一段数列 s,只包含 0.1.2 三种数.每秒在每个 2 后面会插入一个 1 ,每个 1 后面会插入一个 0,之 ...
- 关于购买Redis服务器：腾讯云、阿里云还是华为云？
个人分类: redis使用 编辑 新年伊始,很多商家都开始进行新年产品大促销,在分布是缓存Redis领域,几家大公司也是打得如火如荼,各有千秋啊. 现在市场上比较有口碑的商家有腾讯云.阿里云.华为云三 ...