jq轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮番图</title>
<style>
*{
padding:0;
margin:0;
}
.box{
width:700px;
height:500px;
margin:80px auto;
border:1px solid red;
position: relative;
}
ul{
list-style: none;
}
div ul.pic li img{
width:700px;
height: 500px;
}
.box ul.pic li{
position:absolute;
display: none;
}
div.box ul.point {
width:135px; /*15*5+10*5+1*10*/
height:22px;
position: absolute;
left:50%;
bottom:20px;
margin-left:-72px;
}
div ul.point li{
width:15px;
height:15px;
border-radius: 50%;
border:1px solid purple;
float:left;
margin:5px;
}
.left{
position:absolute;
left:0;
top:50%;
}
.right{
position:absolute;
right:0;
top:50%;
}
.box .ear li{
width:30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top:-15px;
position:absolute;
}
/*.box .pic li.show{*/
/*display:block;}*/
.point li.shows{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="pic">
<li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-005.jpg" ></li>
<li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge.jpg"></li>
<li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-001.jpg"></li>
<li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-002.jpg"></li>
<li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-004.jpg"></li>
</ul>
<ul class="point">
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="ear">
<li class="left"><</li>
<li class="right">></li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var $opoi = $("div ul.point li"); //五个圆圈
var $opic = $("div.box ul.pic li"); //五张图
var $btn = $("div ul.ear li"); //两个小耳朵
var len = $opic.length;
// alert(len);
var first = 0;
$opic.eq(first).show();
$opoi.eq(first).addClass("shows");
$opoi.on("click",function(){ //控制小圆圈
var i = $(this).index();
if (i !== first){
change(i);
}
});
$btn.on("click",function () { //控制左右两个小耳朵
var i = first;
if($(this).index() == 0){
i--;
i %= len;
}
else{
i++;
i %= len;
}
change(i);
});
function change(i) {
$opic.eq(first).fadeOut(500);
$opoi.eq(first).removeClass("shows");
first = i;
$opic.eq(i).fadeIn(500);
$opoi.eq(i).addClass("shows");
}
timer = setInterval(function () { //设置定时器
$opic.eq(first).fadeOut(500);
$opoi.eq(first).removeClass("shows");
var i = (first+1)%len;
first = i;
$opic.eq(i).fadeIn(500);
$opoi.eq(i).addClass("shows");
},1000)
</script>
</div>
</body>
</html>
jq轮播图的更多相关文章
- jq轮播图插件
/* * 使用说明 * * 1:需要提供一个标签 * 2:lis:图片的个数 * 3:轮播图的大小 width ,height * 4:图片的地址imgs[0].carou ...
- jq 轮播图
<style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} </style> ...
- jq轮播图插件—手写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- jq 轮播图 上下自动滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 轮播图 转载-周菜菜
<style> li{list-style-type:none ; display:inline; width:90px; height:160px; float:left; } .pic ...
- jq轮播图实现
html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...
- 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 ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
随机推荐
- 吴裕雄--天生自然C++语言学习笔记：C++ 重载运算符和重载函数
C++ 允许在同一作用域中的某个函数和运算符指定多个定义,分别称为函数重载和运算符重载. 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它们的参数列表和定义(实现)不 ...
- JavaScript获取当前日期前后7天的日期
function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMon ...
- vs2012(或2013)与虚拟机连调试
一．安装Windows Driver Kit 8 1首先在计算机上安装VS2012 (12很容易安装,安装步骤略),然后到官网上下载Windows Driver Kit 8 下载地址: http:// ...
- RecyclerView使用介绍
来源 http://jinyudong.com/2014/11/13/Introduce-RecyclerView-%E4%B8%80/ 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在 ...
- java课程之团队开发冲刺阶段2.4
总结昨天进度: 1.照例学习了课前提醒的功能,不可否认的是,在这个功能上,需要的技术和之前的上课静音有点相似,都是通过广播然后开启service服务,然后进行每分钟的监听,查看时间是否一致,在一致的情 ...
- UVALive 6763 / CSU 1446
今天比赛的时候拿到的第一道题,其实挺简单的,求两等差序列中相同元素的个数,我想了一下就觉得,只要找到了第一个相等的点,然后后面求最大公约数就可以直接得到结果了 网上叫什么拓展欧几里得,我反正是按照我们 ...
- DevOps专题|Packer使用教程
什么是Packer 简单介绍一下自己 Packer 是一个轻量命令行工具, 能在几乎所有主流的操作系统上运行. 在给定一份配置文件的情况下, Packer 能为多种系统架构创建云主机镜像.同时 Pac ...
- SUCTF 2019-EasySQL
0x00 知识点: 1:堆叠注入 2:sql_mode : 它定义了 MySQL 应支持的 SQL 语法,以及应该在数据上执行何种确认检查,其中的 PIPES_AS_CONCAT 将 || 视为字符串 ...
- git登录账号密码错误remote: Incorrect username or password (access token)
git提交时弹框让输入用户和密码,不小心输入错误了 再次提交 一直就提示 remote: Incorrect username or password 错误了,也不弹框要重新输入 解决方法 win1 ...
- 实验吧web-易-这个看起来有点简单
看url中有id=1,明显的sql注入,这里使用手工注入不适用sqlmap,想用的话参考文章(传送门) 1.首先测试有没有sql注入漏洞, http://ctf5.shiyanbar.com/8/in ...