轮播图基本每个网站都会有,也有很多的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手写的更多相关文章

  1. jq轮播图插件—手写

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

  2. 轮播图--js课程

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

  3. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  4. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  5. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  6. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  7. banner轮播图js

    例子1: if(!$('.side_ul ul').is(":animated")){            var wli = $('.side_ul li').width()+ ...

  8. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  9. 简单介绍无限轮播图,js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

随机推荐

  1. [LeetCode OJ] Candy

    There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...

  2. JQUERY1.9学习笔记 之内容过滤器(一) 包含选择器

    描述:选择包含指定文本的所有元素.jQuery( ":contains(text)" ) text:一串大小写敏感的文本. 例:找出所有包含"john"的div ...

  3. 插入数据显示 Duplicate entry '4913' for key 'user_id'

    提示信息翻译:插入4913 使索引重复 分析:索引如果是primary unique这两两种,那么数据表的数据对应的这个字段就必须保证其每条记录的唯一性.否则就会产生这个错误. 一般发生在对数据库写操 ...

  4. xilinx FPGA普通IO作PLL时钟输入

    本帖转自于 :http://www.cnblogs.com/jamesnt/p/3535073.html 在xilinx ZC7020的片子上做的实验; [结论] 普通IO不能直接作PLL的时钟输入, ...

  5. Heapsort 堆排序算法详解(Java实现)

    Heapsort (堆排序)是最经典的排序算法之一,在google或者百度中搜一下可以搜到很多非常详细的解析.同样好的排序算法还有quicksort(快速排序)和merge sort(归并排序),选择 ...

  6. linux kernel

    first step. http://www.cyberciti.biz/faq/howto-install-kernel-headers-package/ http://uliweb.clkg.or ...

  7. Jzzhu and Cities

    CF #257 div2D:http://codeforces.com/contest/450/problem/D 题意:给你n个城市,m条无向有权边.另外还有k条边,每条边从起到到i.求可以删除这k ...

  8. 14.1.2 InnoDB表最佳实践:

    14.1.2 Best Practices for InnoDB Tables InnoDB表最佳实践: 这个章节描述使用InnoDB表最佳实践: 1.指定一个主键用于每个表使用最多查询的列或者多列, ...

  9. 关于索引degree设置的问题

    --并行查询 可以使用并行查询的情况 1. Full table scans, full partition scans, and fast full index scans 2. Index ful ...

  10. 查找最小的K个元素,使用最大堆。

    查找最小的K个元素,使用最大堆,具体代码如下: #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace st ...