【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 ...
随机推荐
- Servlet——web.xml的配置
<servlet>: <servlet-name>: 名称 <servlet-class>: 类名 <init-param>: 初始化参数(只有本ser ...
- WordPress用户导入Drupal7并登录
用户导入比较简单.使用Feeds模块中的Feeds Import工具就行. 不过有个不好地方的,导入前密码是明文,导入后该模块会自动转换为Drupal加密后的密码. 这需要导入后原wp的用户也能登录d ...
- git在windows7下面使用
1. 首选安装. 2. 打开Git Bash 3. 输入,就是配置一下用户名啥的 $ git config --global user.name "Jack Liao" $ git ...
- 工作中遇到的令人头疼的bug
工作中我们会遇到形形色色的bug,但是很多bug都可以调试很明显的看出来,这种bug解决起来我们不会那么头疼但是有些却让人头疼而捉急,特别是本地运行一切正常,上传服务器就会出现bug.现在我总结几个我 ...
- 行驶证识别/行驶证OCR识别全方位解析
本文全面解析行驶证OCR识别,包括什么是行驶证OCR识别.如何选择行驶证识别软件.如何操作行驶证识别软件,以及该软件应用的领域等. 一.了解行驶证识别/行驶证OCR识别 行驶证OCR识别技术,也叫行驶 ...
- AtCoder Regular Contest 101 D - Median of Medians
二分答案 然后前缀和+树状数组来判断这个答案是否大于等于数 如果我们对于一个查询,如果小于这个数令为1,大于这个数领为-1 将所有前缀和放在树状数组中,就可以查询所有sum_{l} < sum_ ...
- Powershell按文件最后修改时间删除多余文件
Powershell按文件最后修改时间删除多余文件 1. 删除目录内多余文件,目录文件个数大于$count后,按最后修改时间倒序排列,删除最旧的文件. Sort-Object -Property La ...
- [leetcode-915-Partition Array into Disjoint Intervals]
Given an array A, partition it into two (contiguous) subarrays left and right so that: Every element ...
- $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 区别
PHP $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 的区别 PHP $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 通常情况下,PHP ...
- c# 导入第三方插件（例如pdf控件），莫名有时候成功有时候出错
问题情境: 正如标题所述: 解决办法: 怀疑是adobe acrobat 9 pro安装文件出错:重新安装,成功. 在这过程中,尝试过福听阅读器,adobe reader等,均正常. 注:1.第三方的 ...