[标签]Jquery图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片左右滚动</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script>

$(function(){
var ul = $(".lxfscroll ul");
var li = $(".lxfscroll li");
var tli = $(".lxfscroll-title li");
var speed = 350;
var autospeed = 3000;
var i=1;
var index = 0;
var n = 0;
/* 标题按钮事件 */
function lxfscroll() {
var index = tli.index($(this));
tli.removeClass("cur");
$(this).addClass("cur");

ul.css({"left":"0px"});
li.css({"left":"0px"});
li.eq(index).css({"z-index":i});
li.eq(index).css({"left":"400px"});
ul.animate({left:"-400px"},speed);
i++;

};
/* 自动轮换 */
function autoroll() {
if(n >= 4) {
n = 0;
}
tli.removeClass("cur");
tli.eq(n).addClass("cur");
ul.css({"left":"0px"});
li.css({"left":"0px"});
li.eq(n).css({"z-index":i});
li.eq(n).css({"left":"400px"});

n++;
i++;
timer = setTimeout(autoroll, autospeed);
ul.animate({left:"-400px"},speed);
};
/* 鼠标悬停即停止自动轮换 */
function stoproll() {
li.hover(function() {
clearTimeout(timer);
n = $(this).prevAll().length+1;
}, function() {
timer = setTimeout(autoroll, autospeed);
});
tli.hover(function() {
clearTimeout(timer);
n = $(this).prevAll().length+1;
}, function() {
timer = setTimeout(autoroll, autospeed);
});
};
tli.mouseenter(lxfscroll);
autoroll();
stoproll();
});
</script>
<style type="text/css">
* {
font-size:12px;
color:#333;
text-decoration:none;
padding:0;
margin:0;
list-style:none;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
.lxfscroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
position: relative;
height: 300px;
border: 4px solid #EFEFEF;
overflow: hidden;
}

.lxfscroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
.lxfscroll-title{
width: 400px;
margin-right: auto;
margin-left: auto;
}
.lxfscroll-title li{
height: 20px;
width: 20px;
float: left;
line-height: 20px;
text-align: center;
border: 1px dashed #CCC;
margin-top: 2px;
cursor: pointer;
margin-right: 2px;
}
.cur{
color: #FFF;
font-weight: bold; background:#000;

}
.lxfscroll ul {
position: absolute;
}
</style>
</head>
<body>
<div class="lxfscroll">
<ul>
<li><img src="img/8c78ce0c-4af6-4205-abc7-56f62ff4af6c.jpg" width="400" height="300" /></li>
<li><img src="img/6019718e-6ab6-42ec-86e2-0fecc91626c7.jpg" width="400" height="300" /></li>
<li><img src="img/a7e5177d-acc2-4aa1-9f71-a6094e9eb8b8.jpg" width="400" height="300" /></li>
<li><img src="img/c9c3c50a-f1a9-4797-96d9-2f92c804f1f3.jpg" width="400" height="300" /></li>
<!--<li><img src="/jscss/demoimg/wall4.jpg" width="400" height="300" /></li>-->
</ul>
</div>
<div class="lxfscroll-title">
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>

JQury自动切换图片的更多相关文章

  1. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  2. 《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片

    aspx <script type="text/javascript"> var oldColor; function SetNewColor(Source) { ol ...

  3. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  5. Jquery的动态切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用定时器通过改变图片的src来切换图片

    点击以后开始自动切换图片 $("#page3_cover_1_back").click(function(){ var i=3; var haha=setInterval(func ...

  7. 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片

    效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...

  8. 获取bing.com的图片并在gnome3中设置自动切换

    发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...

  9. ios基础篇（二十三）—— 定时器NSTimer与图片的自动切换

    一.NSTimer NSTimer是一个能在从现在开始到后面的某一个时刻或者周期性的执行我们指定的方法的对象.可以按照一定的时间间隔,将制定的信息发送给目标对象.并更新某个对象的行为.你可以选择在未来 ...

随机推荐

  1. [网络流 24 题] luoguP4016 负载平衡问题

    [返回网络流 24 题索引] 题目描述 有成环状的 nnn 堆纸牌,现将一张纸牌移动到其邻堆称为一次操作.求使得所有堆纸牌数相等的最少移动次数. Solution 4016\text{Solution ...

  2. CF401D Roman and Numbers 状压DP

    CF401D 题意翻译 将n(n<=10^18)的各位数字重新排列(不允许有前导零) 求 可以构造几个mod m等于0的数字 题目描述 Roman is a young mathematicia ...

  3. 你必须知道的容器监控 (1) Docker自带子命令与Weave Scope

    本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.本篇会介绍几个目前比较常用且流行的容器监控工具,首先我们来看看Docker自带的 ...

  4. 分布式FastDFS集群部署

    FastDFS FastDFS的作者余庆在其 GitHub 上是这样描述的:"FastDFS is an open source high performance distributed f ...

  5. nginx::certbot制作免费证书

    环境 Ubuntu8.04apt-get update apt-get install software-properties-common add-apt-repository ppa:certbo ...

  6. php后端开发要学什么

    PHP历史: 1994年创建,1995年对外发表第一个版本,名为:personal home page tools,之后发表PHP1.0.1995年中期,PHP2.0,从此建立了PHP在动态网站开发的 ...

  7. python如何判断一个对象是否是可迭代的？

    from collections import Iterable test_data = [{"type":1,"keyword":None}, {" ...

  8. 小白学 Python（8）：基础流程控制（下）

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...

  9. Linux配置部署_新手向（五）——Docker的安装与使用

    前言 最近还是在考虑Linux下net core的部署问题,还是发现了很多麻烦的问题,这里还是继续把需要使用的东西部署介绍下吧. Docker 其实对于Docker我也是一星半点儿,了解的不够深入,大 ...

  10. 百万年薪python之路 -- 网络通信原理

    1. C/S B/S架构 C: Client 客户端 B: Browse 浏览器 S: Server 服务端 C/S架构: 基于客户端与服务端之间的通信 eg: QQ,微信,LOL,DNF等需要安装A ...