1、HTML

 <div class="banner">
<div class="b_main">
<div class="b_m_pic">
<ul>
<li>
<a>
<img src="img/1.png" />
</a>
</li>
<li>
<a>
<img src="img/2.png" />
</a>
</li>
<li>
<a>
<img src="img/3.jpg" />
</a>
</li>
<li>
<a>
<img src="img/4.jpg" />
</a>
</li>
<li>
<a>
<img src="img/5.png" />
</a>
</li>
<li>
<a>
<img src="img/6.png" />
</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">&lt</div>
<div class="b_right">&gt</div>
</div>
</div>

2、CSS

 <style type="text/css">
* {
margin: ;
padding: ;
} ul li {
list-style: none;
} img {
margin: ;
width: %; /*这里的宽高是为了占满盒子*/
height: %;
} .banner {
position: relative;
width: 1366px;
height: 780px;
margin: 100px auto;
border: 10px solid #;
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; /*这里给绝对定位,是为了把li叠在一起*/
width: 1366px;
height: 780px;
top: ;
left: ;
}
/*小圆点的样式*/
.b_list ul {
position: absolute; /*这里的ul根据banner定位*/
right: 40px;
bottom: 30px;
} .b_list ul li {
width: 20px;
height: 20px;
float: left;
background: #;
margin-left: 20px;
border-radius: 50px;
border: 2px solid white;
} .b_list ul .l_hover, .b_list ul .l_click {
border: 2px solid #;
background: white;
}
/*两边耳朵的样式*/
.b_btn div {
position: absolute;
width: 100px;
height: 100px;
background: rgba(,,,0.7);
font-size: 60px;
color: white;
text-align: center;
line-height: 100px;
top: %;
margin-top: -80px;
cursor: pointer;
}
/*移到左边*/
.b_btn .b_left {
left: ;
border-radius: %;
}
/*移到右边*/
.b_btn .b_right {
right: ;
border-radius: %;
}
</style>

3、JS

 var $li = $(".b_list ul li");//获取.b_list里面的所有li,放到$li这个变量里面
var len = $li.length - ;
var _index = ;//li的索引
var $img = $(".b_main .b_m_pic li");//同上
var $btn = $(".b_btn div");
var timer = null; $li.hover(function () {
$(this).addClass("l_hover");//指向li添加样式
}, function () {
$(this).removeClass("l_hover");//指向li删除样式
}); //封装函数
function play() {
//获取li的下标,改变样式
$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
//获取图片的下标,实现淡入淡出
$img.eq(_index).fadeIn().siblings().fadeOut();
} //点击事件
$li.click(function () {
_index = $(this).index();
//获取li的下标,改变样式
//$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
//获取图片的下标,实现淡入淡出
//$img.eq(_index).fadeIn().siblings().fadeOut();
play();
}); //两边耳朵的点击事件
$btn.click(function () {
var index = $(this).index();
if (index) {
_index++;
if (_index > len) {
_index = ;
}
play();
} else {
_index--;
if (_index < ) {
_index = len;
}
play();
}
}); //定时轮播
function auto() {
//把定时器放进timer这个对象里面
timer = setInterval(function () {
_index++;
if (_index > len) {
_index = ;
}
play();
}, );
} auto(); //当我移上d_main的时候停止轮播
$(".b_main").hover(function () {
clearInterval(timer);
}, function () {
//移开重新调用播放
auto();
}); //当我移上两边耳朵的时候停止轮播
$(".b_btn div").hover(function () {
clearInterval(timer);
}, function () {
//移开重新调用播放
auto();
});

4、效果图

5、总结

  ① 图片、小圆点、两边的耳朵要使用position:absolute绝对定位,进行叠加。

    注:绝对定位要根据父级元素进行定位,父级元素要加上position: relative;

  ② 根据索引值改变图片,达成切图

    注:实现淡入淡出分别是fadeIn和fadeOut两个jq方法

      siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

  ③ 定时器(实现轮播):

      setInterval()是开始播放,clearInterval()是关闭

      定时器有两个参数,第一个是函数方法(可以另写一个方法,写上方法名调用,也可以直接写一个function),第二个是时间

JQuery实现一个轮播图的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  3. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  4. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

  5. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  6. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  7. 记录一下自己用jQuery写的轮播图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. AXURE 8弄一个轮播图的步骤

    这个图是网上找到,7.0可以使用. 如果是8.0.没有找到"动态面板"这个地方,如下图所示

随机推荐

  1. Java_Scanner和System类

    目录 Scanner类(util包) System类(lang包) Scanner类(util包) Scanner类是一个不可变的类,实现了迭代器接口.一个简单的文本扫描器,可以使用正则表达式解析原始 ...

  2. Java_String&StringBuilder&StringBuffer类

    目录 一.String类 二."==" 和 "equals"的区别 三.StringBuffer和StringBuilder 一.String类 String为 ...

  3. tp框架设置404页面

    无法加载模板跳向404页面 /thinkphp/library/think/Dispatcher.class.php中176行     // 加载模块的扩展配置文件             load_ ...

  4. Win10安装java环境

    window系统安装java 一.下载JDK 1.首先需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downl ...

  5. 一起学爬虫——使用Beautiful Soup爬取网页

    要想学好爬虫,必须把基础打扎实,之前发布了两篇文章,分别是使用XPATH和requests爬取网页,今天的文章是学习Beautiful Soup并通过一个例子来实现如何使用Beautiful Soup ...

  6. Codeforces 1097E. Egor and an RPG game 构造

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1097E.html 题解 首先我们求出 $k = f(n) = \max\{x|\frac{x(x+1)}2 ...

  7. UOJ#185. 【ZJOI2016】小星星 容斥原理 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ185.html 题解 首先暴力DP是 $O(3^nn^3)$ 的,大家都会. 我们换个方向考虑. 假设我们 ...

  8. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第六集之基本命令使用】

    学习命令的方法:linux中所有操作都是命令操作,可想而知命令有多少,更严重的是每个命令有很多参数,记命令容易,记参数就难了,所以建议: 自己准备一个博客,把通常用到的命令及其功能记载下来,用到的时候 ...

  9. Linux中的 openssl-opensslv

    问题 在安装内核模块系统突然出现以下错误 寻找问题 一开始我以为是openssl没有安装,故先进行openssl的检查: 输入yum info openssl 从图中可知,openssl是已经安装过了 ...

  10. Django——在线教育项目总结

    项目简介 在线教育平台 软件依赖: WEB框架:Django(1.11.7).Django REST framework 前端框架:Vue(2.5.16) 数据库: MySql.redis 支付平台: ...