jQ实现的一个轮播图
众所周知，轮播图是被广泛的运用的。
轮播图我们在很多的网站上都可以看到，例如淘宝、京东这些网站都很常见。
下面开始我们的轮播之旅：
搭建我们的骨架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body> </body>
</html>
添加区块：
<div class="banner">
<div class="b_main">
<div class="b_m_pic">
<ul>
<li>
<a>
<img src="img/1.png" width="100%" height="100%"/><!--这里的宽高是为了占满盒子-->
</a>
</li>
<li>
<a>
<img src="img/2.png" width="100%" height="100%"/>
</a>
</li>
<li>
<a>
<img src="img/3.jpg" width="100%" height="100%"/>
</a>
</li>
<li>
<a>
<img src="img/4.jpg" width="100%" height="100%"/>
</a>
</li>
<li>
<a>
<img src="img/5.png" width="100%" height="100%"/>
</a>
</li>
<li>
<a>
<img src="img/6.png" width="100%" height="100%"/>
</a>
</li>
</ul>
</div>
</div>
<!--小圆点-->
<div class="b_list">
<ul>
<li class="l_click"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="b_btn">
<div class="b_left"><</div>
<div class="b_right">></div>
</div>
</div>
css样式:
<style>
*{margin:;padding:}
ul li{list-style:none}
img{margin:}
</style>
<style>
.banner{position: relative;width: 1366px;height: 780px;margin: 100px auto;border: 10px solid #009999;border-radius: 15px}
.banner .b_main{position: relative;width: 1366px;height: 780px;}
.banner .b_main .b_m_pic{position: relative;width: 1366px;height: 780px;}
.b_main .b_m_pic li{position: absolute;width: 1366px;height: 780px;top:;left:;}/*这里给绝对定位，是为了把li叠在一起*/
</style>
<style>
/*小圆点的样式*/
.b_list ul{position:absolute;right: 40px;bottom: 30px;}/*这里的ul根据banner定位*/
.b_list ul li{width: 20px;height: 20px;float: left;background: #333;margin-left: 20px;border-radius: 50px;
border:2px solid white;}
.b_list ul .l_hover,.b_list ul .l_click{border:2px solid #333;background: white}
/*两边耳朵的样式*/
.b_btn div{position: absolute;width: 100px;height: 100px;background: rgba(0,0,0,0.7);font-size: 60px;color: white;text-align: center;line-height: 100px;top: 50%;margin-top: -80px;cursor: pointer;}
.b_btn .b_left{left:;border-radius: 50%}/*移到左边*/
.b_btn .b_right{right:;border-radius: 50%}/*移到右边*/
</style>
接下来是我们的JS代码：
var $li = $(".b_list ul li");//获取.b_list里面的所有li，放到$li这个变量里面
var len = $li.length-1;
var _index = 0;//li的索引
var $img = $(".b_main .b_m_pic li");//同上
var $btn = $(".b_btn div");
var timer = null;
// alert(typeof timer); timer是一个对象
$li.hover(function(){
$(this).addClass("l_hover");//指向li添加样式
},function(){
$(this).removeClass("l_hover");//指向li删除样式
});
//点击事件
$li.click(function(){
_index = $(this).index();
//获取li的下标，改变样式
//$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
//获取图片的下标，实现淡入淡出
//$img.eq(_index).fadeIn().siblings().fadeOut();
play();
});
//封装函数
function play(){
//获取li的下标，改变样式
$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
//获取图片的下标，实现淡入淡出
$img.eq(_index).fadeIn().siblings().fadeOut();
}
//两边耳朵的点击事件
$btn.click(function(){
var index = $(this).index();
if(index) {
_index++;
if (_index > len) {
_index = 0;
}
play();
}else {
_index--;
if(_index < 0){
_index = len;
}
play();
}
});
//定时轮播
function auto(){
//把定时器放进timer这个对象里面
timer = setInterval(function(){
_index++;
if(_index > len){
_index = 0;
}
play();
},2000);
}
auto();
//当我移上d_main的时候停止轮播
$(".b_main").hover(function(){
clearInterval(timer);
},function(){
//移开重新调用播放
auto();
});
//当我移上两边耳朵的时候停止轮播
$(".b_btn div").hover(function(){
clearInterval(timer);
},function(){
//移开重新调用播放
auto();
});
下面是我们的效果图：
总结：
1、图片、小圆点、两边的耳朵要使用position：absolute绝对定位，进行叠加。
注：绝对定位要根据父级元素进行定位，父级元素要加上position: relative;
2、根据索引值改变图片，达成切图
注：实现淡入淡出分别是fadeIn和fadeOut两个jq方法
siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。
3、定时器（实现轮播）：
setInterval()是开始播放，clearInterval()是关闭，有始有终嘛~~~~~
定时器有两个参数，第一个是函数方法（可以另写一个方法，写上方法名调用，也可以直接写一个function），第二个是时间
jQ实现的一个轮播图的更多相关文章
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- JQuery实现一个轮播图
1.HTML <div class="banner"> <div class="b_main"> <div class=" ...
- 用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...
- jq交叉淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AXURE 8弄一个轮播图的步骤
这个图是网上找到,7.0可以使用. 如果是8.0.没有找到"动态面板"这个地方,如下图所示
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- 使用jq深入研究轮播图特性
网站轮播图 太耳熟的词了 基本上做pc端的 主页绝壁会来一个轮播图的特效 轮播图他一个页面页面的切换,其实的原理是通过css的定位 ,定位到一起,第一张首先显示,其余默认隐藏. 今天我实现的这个轮播 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
随机推荐
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- js 计时器小练-20160601
今天要做一个计时器小练,所以我就做了练习,代码如下. // 初始化时间,以及定义全局量去接收计时器 var timer = 0; var t; var h, min, sec, millisec; / ...
- C#中的泛型和泛型集合
泛型 泛型引入了一个概念:类型参数.通过使用类型参数(T)减少了运行时强制转换或装箱操作的风险,通过泛型可以最大限度的重用代码,保护类型的安全及提高性能,他的最常见应用就是创建集合类,可以约束集合类中 ...
- es6基础系列一：let和const
let 声明变量,可以说是具有作用域的var,用于声明变量,主要规则如下: 1 let声明的变量拥有块级作用域 { let i = 1; console.log(i); // 1 } console. ...
- php面向对象（一）---2017-04-17
重点:定义类与实例化类:访问修饰符:构造函数 一.面向对象 面向对于与面向过程的主要区别在于:前者包含类和对象的概念 二.类和对象 1.类是由众多对象抽象(归纳总结)出来的东西 代表所有对象的特 ...
- 对Qt下对话服务器客户端的总结（MyTcpServer与MyTcpClient）
在汇文培训老师给讲了这个例子.讲的挺好的 Qt编写聊天服务器与客户端主要用到下面两个类: QTcpSocket --- 处理连接的 QTcpServer --- 处理服务器,对接入进行响应,创建每个链 ...
- 初识JS
今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...
- Android系统--输入系统（八）Reader线程_使用EventHub读取事件
Android系统--输入系统(八)Reader线程_使用EventHub读取事件 1. Reader线程工作流程 获得事件 size_t count = mEventHub->getEvent ...
- ue4构建光照失败问题与解决
不知从哪天开始,我的ue4.13就突然无法成功构建光照了, 症状为:虽然swarm连接到了100%,然而之后就卡住一动不动,一看看log是连接tcp什么agent什么失败的. 虽然把所有物体都设置成非 ...
- JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...