难得周末能休息，也是越发的代码难受，手就想敲点东西，这不闲着无聊敲了一个Jq版的大图滚动，不足之处大家批评指正：

运作环境win7,代码编辑器是：sublime; 我把源码复制了一下，

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#outer{width: 314px;height: 220px;position: relative;margin: 30px auto;}
#inner{width: 314px;height: 220px;position: absolute;z-index: -1;}
#inner img{width: 314px;height: 220px;position: absolute;left: 0;top: 0; z-index: 0; opacity: 0;}
#xiabiao{width: 100px;overflow: hidden;position: absolute;bottom: 10px;left: 100px;list-style: none;}
#xiabiao li{width: 15px;height: 15px;font-size: 12px; float: left;margin-left: 5px;background: #fff;text-align: center;cursor: pointer;}
#left{width: 30px;height: 60px;position: absolute;left: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
#right{width: 30px;height: 60px;position: absolute;right: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;}
#inner .show{opacity: 1;}
#xiabiao .select{background: red;color: #fff;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<img class="show" src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/06.jpg" alt="">
</div>
<ul id="xiabiao">
<li class="select">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<p id="left"></p>
<p id="right"></p>
</div>

<script src="jquery.js"></script>
<script>
var x=0;
var y;
var timer1=null,timer2=null,timer3=null;
$(function () {
function everygo(){
var a=0;
if (x>=$('#inner img').length) {
x=0;
};
$('#xiabiao li').eq(x).css({'background':'red','color':'#fff'}).siblings().css({'background':'#fff','color':'black'});
$('#inner img').eq(x).css('z-index','1').siblings().css('z-index','0');
timer1=setInterval(function(){
a++;
if (a>=10) {
clearInterval(timer1);
$('#inner img').eq(x).siblings().css('opacity','0');
};
var b=a/10;
$('#inner img').eq(x).css('opacity',b);
},30)
};
function autogo(){
timer2=setInterval(function () {
x++;
everygo();
},2000)
};
autogo();
$('#xiabiao li').click(function () {
clearInterval(timer1);
clearInterval(timer2);
x=$(this).index();
everygo();
autogo();
})
$('#left').click(function () {
clearInterval(timer1);
clearInterval(timer2);
x--;
everygo();
autogo();
})
$('#right').click(function(){
clearInterval(timer1);
clearInterval(timer2);
x++;
everygo();
autogo();
})
});

</script>
</body>
</html>

忙的时候想休息，休息的时候想代码，也是没有谁了，呵呵口水大军淹死我吧。

一个jQ版大图滚动的更多相关文章

  1. jQ版大图滚动

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

  2. 轮播图js版&jQ版

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

  3. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  4. ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程

    从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...

  5. AOS – 另外一个独特的页面滚动动画库（CSS3）

    AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...

  6. TaskScheduler一个.NET版任务调度器

    TaskScheduler是一个.net版的任务调度器.概念少,简单易用. 支持SimpleTrigger触发器,指定固定时间间隔和执行次数: 支持CronTrigger触发器,用强大的Cron表达式 ...

  7. 写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）

    前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...

  8. 心愿：做一个精简版MFC

    我觉得自己有能力看懂MFC的C++代码和总体流程,但是由于MFC混杂了太多的东西,比如OLE等等不必要的东西,又做了无数的ASSERT判断,影响整体流程的理解.因此我要做一个精简版的MFC,而且能用它 ...

  9. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

随机推荐

  1. ajax原理和跨域解决方法

    ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...

  2. Thinkphp查询 1.查询方式 2.表达式查询 3.快捷查询 4.区间查询 5.组合查询 6.统计查询 7.动态查询 8.SQL 查询

    1.使用字符串作为条件查询 $user = M('User'); var_dump($user->where('id=1 AND user="蜡笔小新"')->sele ...

  3. MySQL 在 LIMIT 条件后注入

    from:https://rateip.com/blog/sql-injections-in-mysql-limit-clause/ 此方法适用于MySQL 5.x中,在limit语句后面的注入例如: ...

  4. target-densitydpi

    一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi).Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度.一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素 ...

  5. visual studio2015从git上clone(克隆)项目

    本文介绍Visual Studio2015从git上clone项目代码的步骤. 1.打开VS2015,进到起始页,打开"团队资源管理器",如下图: 2.点击"克隆&quo ...

  6. AJAX发送参数到后台，前台火狐debug报undefine

    后面经过查找:估计是数据并不是Json格式,由于var PATIENT_ID=getIdSelections();其中PATIENT_ID是数组,所以必须转成字符串. $('#table').on(' ...

  7. LeetCode Add Strings

    原题链接在这里:https://leetcode.com/problems/add-strings/ 题目: Given two non-negative numbers num1 and num2  ...

  8. php字符截取

    mb_substr($str,0,2) 0 索引的位置  2 长度 mb_substr($str,0,-1) 最后一位如果是负数 表示从前面0开始到后面-1 0,-1都是索引

  9. Win8电脑蓝屏并提示dpc_watchdog_violation

    用尽系统自带的工具均无法恢复,F8能进系统.后来使用如下方法解决了 这种错误情况的发生可能是由于 iastor.sys 驱动没有完全兼容 Windows 8系统所造成的. 微软正在研究一种可行方案,来 ...

  10. java List<Item> its=new ArrayList<Item>(); Map按value中的某字段排序

    public List<Item> getAllItem(){ Map<Long, Item> itemDic = new HashMap<Long, Item>( ...