jq传统火车轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.carousel{
width: 560px;
height: 300px;
border: 1px solid #000;
margin:50px auto;
position: relative;
overflow: hidden;
}
.carousel .unit{
/*火车宽度要足够大*/
width:8888px;
height:300px;
position: absolute;
left:0px;
}
.carousel .unit li{
/*图片并排显示*/
float: left;
width: 560px;
height: 300px;
}
.carousel .btns a{
width: 30px;
height: 60px;
position: absolute;
top:50%;
margin-top: -30px;
background-color: rgba(0,0,0,.5);
color:#fff;
font-size: 20px;
text-align: center;
line-height: 60px;
}
.carousel .btns a.leftBtn{
left: 10px;
}
.carousel .btns a.rightBtn{
right: 10px;
}
.carousel .circles{
width: 140px;
height:20px;
position: absolute;
left:50%;
margin-left: -70px;
bottom: 30px;
overflow: hidden; }
.carousel .circles ol{
width: 150px;
}
.carousel .circles ol li{
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background-color: orange;
}
.carousel .circles ol li.cur{
background-color: red;
} </style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="unit" id="unit">
<li><a href=""><img src="data:images/0.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/1.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/2.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/3.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/4.jpg" alt=""></a></li>
</ul>
<div class="btns">
<a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a>
<a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $carousel = $("#carousel");
var $unit = $("#unit");
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circles = $("#circles ol li");
var amount = $circles.length; // // 信号量可能性0,1,,2,3,4
// 信号量表示当前显示第几张图片
var idx = 0; // 克隆第一张图片clone()追加到火车的最后appendTo
$unit.children("li:first").clone().appendTo($unit); // 定时器
var timer = setInterval(rightBtnFun, 2000);
// 关闭定时器
$carousel.mouseenter(function(){
clearInterval(timer);
});
// 重新开启定时器
$carousel.mouseleave(function(){
// 设表先关
clearInterval(timer);
timer = setInterval(rightBtnFun, 2000);
}); // 右按钮的点击事件
// 策略：先拉动，再判断
$rightBtn.click(rightBtnFun);
function rightBtnFun(){
// 图片运动什么都不做
if($unit.is(":animated")){
return;
}
idx ++;
$unit.animate({"left": -560 * idx },700,function(){
// 判断
if(idx > amount - 1){
idx = 0;
// console.log(idx);
// 猫腻图瞬间移动到真图
$unit.css("left",0);
}
});
// 小圆点改变
// 信号量有一段时间idx = 5 这是小圆点指示0
var i = idx <= amount - 1 ? idx : 0;
$circles.eq(i).addClass("cur").siblings().removeClass("cur");
} // 左按钮的点击事件
$leftBtn.click(function(){
// 防流氓
if(!$unit.is(":animated")){
// 策略先验证再拉动
// 0,1,2,3,4,
idx --;
if(idx < 0){
idx = 4;
// 火车瞬间移动到猫腻图
$unit.css("left",-560 * amount);
}
$unit.animate({"left": -560 * idx},700);
// 小圆点
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
}); // 小圆点的鼠标进入事件
$circles.mouseenter(function(){
idx = $(this).index();
$unit.stop(true).animate({"left": -560 * idx},700);
// 小圆点改变
$(this).addClass("cur").siblings().removeClass("cur");
}); </script>
</body>
</html>
jq传统火车轮播图的更多相关文章
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- JQ万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jq龙禧轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- jq交叉轮播图变种【闪一下黑】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq版轮播图
html部分 <div class="banner"> <ul class="img"> <li><img src=& ...
- HTML+jq简单轮播图
.main{ width: 100%; min-width: 1100px; display: table; margin: 0 auto; text-align: ce ...
随机推荐
- WCF系统内置绑定列表与系统绑定所支持的功能
WCF系统内置绑定列表 绑定 配置元素 说明 传输协议 编码格式 BasicHttpBinding <basicHttpBnding> 一个绑定,适用于与符合 WS-Basic Pro ...
- display:none和visiblity:hidden区别
相同: 1.两者都能隐藏元素. 不同: 1.display:none 不占页面空间,visiblity:hidden 占据原先页面空间. 这里必须说明的是,元素不占页面空间后,取该元素或其内部元素的宽 ...
- JSP和JavaBean总结
JSP JSP全名为Java Server Pages,即java服务器页面,其根本是一个简化的Servlet设计.它是在传统的网页HTML文件中插入Java代码,从而形成JSP文件. JSP注释分为 ...
- Akka Serialization
Akka本身使用了Protocol Buffers来序列化内部消息(比如gossip message).Akka系统还可以配置自定义序列化机制. 配置conf akka { actor { ## 在a ...
- shell按行读取文件
这工作小半年了发现以前学的那么多流弊技能都不怎么用,倒是shell用的很多,自己已经从shell小菜鸟一步步走过来,已经要变成大菜鸟=.= 经常需要用shell按行读取配置文件,自己在上面踩了很多坑, ...
- ArcGIS 网络分析[2.2] 服务区分析
什么是服务区? 我们先提一个很常见的社会现象:一个医院,如果要发起抢救,那么10分钟内能去多远? 时间就是生命,当结合道路网的阻力进行最短路径分析时,得到的可达的覆盖区域,这个区域就是服务区. 服务区 ...
- UVALive 3716 DNA Regions
题目大意:给定两个长度相等的字符串A和B,与一个百分比p%,求最长的.失配不超过p%的区间长度.O(nlogn). 题目比较简单套路,推推式子就好了. 记S[i]表示到下标i一共有多少个失配,就相当于 ...
- HashMap 之弱引用 - WeakHashMap
■ Java 引用的相关知识 1. 强引用 Object o = new Object(); 强引用是Java 默认实现 的引用,JVM会尽可能长时间的保留强引用的存在(直到内存溢出) 当内存空间不足 ...
- js 深入理解原型模式
我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象.使用原型的好处是可以让所有对象共享它所包含的属性和方法. function Person(){ } Pers ...
- 安装supervisord
一:简介 supervisord是一个进程管理工具,提供web页面管理,能对进程进行自动重启等操作. 优点: - 可以将非后台运行程序后台运行 - 自动监控,重启进程 缺点: - 不能管理后台运行程序 ...