【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 ...
随机推荐
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- easyui-dialog打开多次数据串台问题
问题: 公司项目最近在用easyui写后台管理系统,发现dialog使用后总会报出莫名奇妙的问题 1.打开多次后数据显示上一次的,表单提交错误或者获取数据错误 2.来回跳转后,会有打开其它dialog ...
- 用 Qt 的 QAudioOutput 类播放 WAV 音频文件
用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...
- python全栈开发-前方高能-函数
python_day_9 一.今日主要内容 函数: 函数:对功能的封装 语法: def 函数名(形参): 函数体 函数名(实参) 函数名:命名规则和变量一样 函数的返回值: return, 函数执行完 ...
- axios封装（一）基础配置
axios 是目前流行的Promise网络请求库,在浏览器端他通过 xhr方式创建ajax请求.在node环境下,通过 http 库创建网络请求. axios 提供了丰富的配置,这里讲一讲我在工作中通 ...
- PHP自定义生成二维码跳转地址
比较简单的一款PHP自定义生成二维码跳转地址,手机端微信扫码,自动跳转到定义好的链接.支持自定义生成二维码尺寸.间距等. 鼠标悬浮显示二维码弹出层,离开后消失.js实现,代码如下: $(fu ...
- 设计模式C++实现
准备写一系列笔记用来记录学习设计模式的过程,同时写出自己对几种主要的设计模式的理解,以及编码实现,同时总结. 主要参考书籍就是 <Head First Design Patterns>这本 ...
- 笔试题——C++字符排序
题目:字符排序 题目介绍:输入一组以空格隔开的字数串,将它们奇数位升序排序,偶数位降序排序,再重新输出成新的字数串. 例: 输入: 4 6 2 3 6 7 8 1 奇数位:4 2 6 8 ——2 4 ...
- [C++] Solve "No source available for main()" error when debugging on Eclipse
In Mac, the issue image: 1. A existing cmake project on disk 2. import this project into Eclipse. 3 ...
- apply新用法，最大值查找
要找到数组中的最大或最小值,可以像下面这样使用apply() var values=[1,2,3,4,5,6,7,8]; var max = Math.max.apply(Math,values); ...