轮播图--JS手写
轮播图基本每个网站都会有，也有很多的JQuery插件可以用，这里是用JS代码写的。
案例：http://www.shopli.cn 首页三张图片的轮换就是这种写法
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
@*Css样式*@
<style>
* {
margin: ;
padding: ;
}
ul {
height: 600px;
position: relative;
}
ul li {
float: left;
list-style-type: none;
height: %;
background-position: % %;
background-size: cover;
}
.one {
background-image: url("/Content/1.jpg");
}
.two {
background-image: url("/Content/2.jpg");
}
.three {
background-image: url("/Content/3.jpg");
}
.four {
background-image: url("/Content/4.png");
}
.dw {
position: absolute;
bottom: 5px;
width: %;
text-align: center;
}
ol {
list-style: none;
text-align: center;
}
ol li {
display: inline-block;
width: 22px;
height: 4px;
padding: 4px;
overflow: hidden;
text-indent: -999em;
cursor: pointer;
background-color: white;
}
.hasClass {
background-color: red;
}
</style>
</head>
<body>
<div style="position: relative; overflow: hidden; height: 600px;">
@*有多少个li，ul的宽度就是 X00%*@
<ul style="width:600%; margin-left:-100%;">
@*第一张前面放最后一张，做轮播给人一种一直往一个方向的感觉*@
当显示这张图片时，ul就改变样式定位到第4张图片
<li class="four" style="width:16.6667%"></li>
@*这里的li标签宽度是16.66667%怎么来的， 只有4张图片做轮播，前后各加一张就是6张，
16.666667=100/6 如果是2张做轮播，一共4个li, 每个li的宽度就是25%*@
@*这4张图片做轮播*@
<li class="one" style="width:16.6667%"></li>
<li class="two" style="width:16.6667%"></li>
<li class="three" style="width:16.6667%"></li>
<li class="four" style="width:16.6667%"></li>
@*最后一张后面放第一张，做轮播给人一种一直往一个方向的感觉*@
当显示这张图片时，ul改变样式定位到第1张图片
<li class="one" style="width:16.6667%"></li>
</ul>
<nav class="dw">
<ol >
<li data-slide="" class="hasClass"></li>
<li data-slide="" class=""></li>
<li data-slide="" class=""></li>
<li data-slide="" class=""></li>
</ol>
</nav>
</div>
</body>
</html>
<script>
var mm;
function hh() {
//ul li做向左移动
$("ul").animate({ "left": "+=" + "-100%" }, , function () {
var i;//得到第几张的值
$("ol li").each(function () {
if ($(this).attr("class") != "") {
i = $(this).attr("data-slide");
}
});
//因为是做过一次动画才来找值，所有当i为3时，ul是的left是 -400%,也就是第5张图片
i = parseInt(i) + ;
//如果等于4 就重置下， 这里有4张做轮播就是4
if (parseInt(i) == ) {
i = ;
$("ul").css("left", "0%"); //重新定位下，ul的left已经重置了，因为图片没变，所以给人一个方向的假象
}
$("ol li").attr("class", ""); //把所有的li的样式移除
$("ol li:eq(" + parseInt(i) + ")").attr("class", "hasClass"); //下面的图标显示
})
mm = setTimeout("hh()", ); //每个4秒做一次动画
}
$(document).ready(function () {
mm = setTimeout("hh()", );
//点第几张就显示几张 左右也是一回事，这里没写
$("ol").on("click", "li", function () {
var jj = $(this).attr("data-slide"); //点的第几张
$("ol li").attr("class", "");
$("ol li:eq(" + parseInt(jj) + ")").attr("class", "hasClass"); //下面的图标显示
clearTimeout(mm);
$("ul").animate({ "left": "-" + parseInt(jj) + "00%" }, , function () {
mm = setTimeout("hh()", );
}); //重新定位下
})
})
</script>
轮播图--JS手写的更多相关文章
- jq轮播图插件—手写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 轮播图--js课程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 轮播图js版&jQ版
JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...
- 小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...
- 轮播图js编写
//面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...
- 转：大气炫酷焦点轮播图js特效
使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...
- banner轮播图js
例子1: if(!$('.side_ul ul').is(":animated")){ var wli = $('.side_ul li').width()+ ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
随机推荐
- 几种常见ECG数据格式及对比
SCP.DICOM.HL7aECG.GDF格式及对比 本文档首先给出SCP.DICOM.HL7aECG.GDF四种心电信号格式的具体数据结构,然后分析其各自的特点及适用范围. 一.SCP-ECG fo ...
- Linux安装Ｍonaco字体
Linux安装字体的方式其实很简单,就是调用 fc-cache -f -v 命令,其实我们可以什么都不添加直接调用这个命令可以看到它会去/usr/share/fonts/truetype等目录以及你自 ...
- Navicat 选择语句
1.进入数据库后,点击Query 2.点击new query 3.左边提供界面的筛选条件,如果不清楚sql语句,可直接在上面操作 4.右边可自己编写sql语句 5.写完语句后,点击Run,在resul ...
- 【FLYabroad 】微软内部代码检查工具 (Microsoft Source Analysis for C#)[转]
SourceAnalysis (StyleCop)的终极目标是让所有人都能写出优雅和一致的代码,因此这些代码具有很高的可读性. 早就听说了微软内部的静态代码检查和代码强制格式美化工具 StyleCop ...
- 解决SQL Server Management Studio Express不支持更新全文目录的方法
微软的说法:https://msdn.microsoft.com/zh-cn/library/ms365247.aspx 可以用命令创建: A.创建唯一索引.全文目录和全文索引 以下示例对 Adven ...
- SublimeText插件Anaconda如何关闭警告框
之前在学习python的时候,使用了代码编辑器Sublime Text 3并安装了强大的Anaconda插件.瞬间让Sublime Text3变身为Python的IDE. 在使用过程中,侧边栏的白点和 ...
- C语言基础学习运算符-逻辑运算符
逻辑运算符 逻辑运算符是根据表达式的值来返回真值或是假值.C语言中的逻辑运算符就三种,如下表所示: 列如: 更多学习内容,就在码芽网http://www.mayacoder.com/lesson/in ...
- CentOS-6.4安装配置Nginx
在安装nginx前,需要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件.安装必须软件: [root@admin /]#yum install ...
- iOS开发——C篇&数组与指针
2015-07-17 13:23 编辑 前面我们介绍了关于C语言的内存分配问题,下面我们就开始介绍关于C语言的两个非常重要的知识点:数组与指针 数组与指针其实不仅仅是再C语言中,再OC中(当然OC是内 ...
- ARM9的MMU
一 页表 1. 页表是放置在RAM(一般为DRAM)中的一个数据段. 2. ARM的地址空间为2^32字节,即4G字节. 3. 一级页表总共有4096条记录,每条记录对应的地址块为1M,一级页表中的记 ...