[标签]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. WCF 入门调用实例教程

    WCF的相关概念信息就不在此赘述了,网上一搜一大把. 现在让我们动手搭建我们的第一个wcf程序吧,具体流程如下: 1. 新建立空白解决方案,并在解决方案中新建项目,项目类型为:WCF服务应用程序. 2 ...

  2. 存储物理页属性的PFN数据库

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 存储物理页属性的PFN数据库 一.PFN的基础概念 页帧:即CPU ...

  3. 《Java并发编程实战》读书笔记-第一部分 基础知识小结

    并发技巧清单 可变状态是至关重要的 所有的并发问题都可以归结为如何协调对并发状态的访问.可变状态越少,就越容易确保线程安全性. 尽量将域声明为final类型,除非需要它们是可变的. 不可变对象一定是线 ...

  4. HDU 6047 Maximum Sequence(贪心+线段树)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=6047 题目: Maximum Sequence Time Limit: 4000/2000 MS (J ...

  5. jmeter-中文乱码问题

    1.被测系统中问乱码 解决办法:接口请求时添加编码方式UTF-8

  6. spring cloud alibaba 简介

    ### Spring Cloud Alibaba [官方github地址](https://github.com/alibaba/spring-cloud-alibaba) Spring Cloud ...

  7. WSL捣鼓记——图形化（以emacs为例）

    前言 这学期开始学习linux,但笔记本装了双系统之后指纹识别会失效,开虚拟机又十分占据内存,于是乎基本需要使用linux的时候就用wsl,可奈何只有命令行界面,在需要使用图形软件(如emacs)的时 ...

  8. The usage of Markdown---标题

    更新时间:2019.09.14 目录: 1. 序言 2. 标题   2.1 类Atx形式   2.2 类Setext形式 3. 总结 1. 序言   Markdown是一种纯文本的标记语言,只要熟悉M ...

  9. 关于ESET占用CPU严重 的解决方案||ESET CPU 100%||用迅雷时ESET占用CPU（6月22日再次更新）

    关于ESET占用CPU严重 的解决方案 本文根据原帖有适量删改. ESET 的杀毒软件历来以占用资源少,CPU消耗少著称,可是很多朋友(特别是中国大陆的朋友)反应ESS & EAV 间歇性占用 ...

  10. 【MySQL】MySQL 8.0.X的安装与卸载命令

    1.请读者自行下载MySQL Server https://dev.mysql.com/downloads/mysql/ 2.解压.zip文件 将mysql-8.0.12-winx64.zip解压到 ...