用jQuery实现简单的简单的轮播图
图片来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.outer{
margin: 50px auto;
width: 590px;
height: 470px;
position: relative;
}
.img li{
position: absolute;
top: 0;
left: 0; }
.num{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
.num li{
display: inline-block;
height: 20px;
width: 20px;
background-color: gray;
color: #ffffff;
text-align: center;
line-height: 20px;
border-radius:50% ;
margin: 0 10px; }
.btn{
position: absolute;
height: 60px;
width: 30px;
background-color: gray;
color: #ffffff;
text-align: center;
line-height: 60px;
top: 50%;
margin-top: -30px;
display: none;
opacity: 0.8;
}
.left_btn{
left: 0; }
.rigth_btn{
right: 0;
}
.outer:hover .btn{
display:block ;
}
.current{
background-color: red!important; /*设置优先级*/
}
{# .num .current{#}
{# background-color: red#}
{#}#}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li> </ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="left_btn btn"> < </div>
<div class="rigth_btn btn"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var i=0;
$(".num li").mouseover(function () {
$(this).addClass("current").siblings().removeClass('current');
var index=$(this).index();
i=index;//解决一个bug（当鼠标放到outer图上时，定时器是停止，鼠标再指到current的某个数字，图片就要开始从
//那里开始轮播，如果没有i=index，图片会从最原先定时器停止的位置的开始轮播。
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
var time=setInterval(move,1000);
//eq() 方法将匹配元素集缩减值指定 index 上的一个。
//stop() 方法用于在动画或效果完成前对它们进行停止
function move() {
i++
$(".num li").eq(i).addClass("current").siblings().removeClass('current');
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
if(i==6){
i=-1
}
}
//当鼠标放到页面上时，停止定时器，离开开启定时器函数hover
// hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
$(".outer").hover(function () {
clearInterval(time)
},function () {
time=setInterval(move,1000)
})
/****************点击左右按钮******************/
$(".rigth_btn").click(function () {
move()
})
$(".left_btn").click(function () {
move_left()
})
function move_left() {
if(i==0){
i=6
}
i--
$(".num li").eq(i).addClass("current").siblings().removeClass('current')
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
</script>
</body>
</html>
京东的首页
用jQuery实现简单的简单的轮播图的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- 用jquery实现带左右按键的轮播图
成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- java的几种对象(po,dto,dao等)
j2ee中,经常提到几种对象(object),理解他们的含义有助于我们更好的理解面向对象的设计思维. POJO(plain old java object):普通的java对象,有别于特殊的j ...
- 一文说尽 MySQL 优化原理
说起MySQL的查询优化,相信大家收藏了一堆奇技淫巧:不能使用SELECT *.不使用NULL字段.合理创建索引.为字段选择合适的数据类型..... 你是否真的理解这些优化技巧?是否理解其背后的工作原 ...
- Excel技巧--让折线图带面积更直观生动
上图为带面积的折线图,比单纯的折线图更直观更好看. 制作办法: 1.先制作纯折线图: 2.再复制一遍数据列,选中图表,点击粘贴(ctrl+v): 3.右键图表,点击“更改图表类型”,对话框如下设置: ...
- mybatis传入List实现批量更新
如果要在一个update里面执行多条更新语句,只需要在jdbc:url后面跟上allowMultiQueries=true的参数,比如: jdbc:mysql://127.0.0.1:3306/tes ...
- 直接突破百度网盘，用IDM或者迅雷下载。
直接突破百度网盘,用IDM或者迅雷下载.推荐浏览器: 360 ,CHORME360,: 打开网盘下载页,然后F12→找到CONSOLE→刷新→输入代码“Object.defineProperty(th ...
- 数字序列中某一位数字(《剑指offer》面试题44)
由于这道题目在牛客上没有,所以在此记录一下. 一.题目大意: 数字以0123456789101112131415…的格式序列化到一个字符序列中.在这个序列中,第5位(从0开始计数,即从第0位开始)是5 ...
- java中遍历实体类，获取属性名和属性值
方式一(实体类): //java中遍历实体类,获取属性名和属性值 public static void testReflect(Object model) throws Exception{ for ...
- 【占位符替换】替换String中的占位符标志位{placeholder}
概述 占位符替换, 占位符表示为:{placeholder}; 示例:替换如下{xxx}占位符中的内容 "名字:{name},年龄:{age},学校:{school}" 提供了两种 ...
- Python 解析XML实例（xml.sax）
已知movies.xml <collection shelf="New Arrivals"> <movie title="Enemy Behind&qu ...
- es6 class函数的用法，及兼容程度
//es6中 class的新特性:面向对象的方式 class name{ fram(){ var div=document.getElementById("div"); div.s ...