【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 ...
随机推荐
- vue Map 渲染DOM
遍历对象(map),以键值对k:v的形式渲染DOM (1)DOM (2)数据模板
- JAVA Date、String、Calendar类型之间的转化
1.Calendar 转化 String //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 Calendar calendat = Calendar.getInstance(); ...
- pyquery详细用法
python爬虫之PyQuery的基本使用 PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQue ...
- Altera FPGA AS,PS,Jtag配置模式区别
Altera FPGA AS,PS,Jtag配置模式区别 FPGA器件有三类配置下载方式:主动配置方式(AS)和被动配置方式(PS)和最常用的(JTAG)配置方式. AS模式(active seri ...
- asp.net mvc access数据库操作
连接access数据库其实也简单,只要按照mvc的模式来就可以,遵循c v约定就可以 既然渲染试图是强类型,那么取得的数据就转换成强类型,其他一切和asp.net操作一样 DB mydb = new ...
- JQuery点击打开再点击关闭
$("#03").click(function() { $("#03").show(speed); $("#03").css("c ...
- US Customs bond DDP 船运
客户提供目的港门点地址,提供美国进口产品的关税税率基本上就可以了关于ISF信息到时候你发给老外让老外填填好就可以了BAND 货值*0.575%POA 货值*0.335%这二个费用如果国内付就付了,国 ...
- DotNetOpenAuth Part 1 : Authorization 验证服务实现及关键源码解析
DotNetOpenAuth 是 .Net 环境下OAuth 开源实现框架.基于此,可以方便的实现 OAuth 验证(Authorization)服务.资源(Resource)服务.针对 DotNet ...
- AngularJS - 路由 routing 基础示例
AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的.当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面.Angu ...
- Scrum立会报告+燃尽图（十一月二十三日总第三十一次）：界面修改及新页面添加
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2410 项目地址:https://git.coding.net/zhang ...