[标签]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. [BZOJ1694/1742/3074]The Cow Run 三倍经验

    Description John养了一只叫Joseph的奶牛.一次她去放牛,来到一个非常长的一片地,上面有N块地方长了茂盛的草.我们可 以认为草地是一个数轴上的一些点.Joseph看到这些草非常兴奋, ...

  2. Maven安装和在IDEA配置Maven

    一.Windows安装Maven 1.下载Maven 这里需要注意:不要去官网下载最新的版本,因为会出现与IDEA不兼容的现象. 这里提供下载地址:https://archive.apache.org ...

  3. python学习-正则表达式（十）

    1.查看re模块的全部属性和函数 >>>import re,pprint >>>pprint.pprint(re.__all__) ['match', 'fullm ...

  4. 百万年薪python之路 -- 并发编程之 多线程 三

    1. 阻塞,非阻塞,同步,异步 进程运行的三个状态: 运行,就绪,阻塞. 从执行的角度: ​ 阻塞: 进程运行时,遇到IO了,进程挂起,CPU被切走. ​ 非阻塞: 进程没有遇到IO 当进程遇到IO, ...

  5. Spring MVC（1）Spring MVC的初始化和流程以及SSM的实现

    一.Spring MVC概述 1.Spring MVC 的架构 对于持久层而言,随着软件的发展,迁移数据库的可能性很小,所以在大部分情况下都用不到Hibernate的HQL来满足迁移数据库的要求.与此 ...

  6. 设计模式C++描述----07.建造者(Builder)模式

    一. 概述 Builder 模式要解决的问题是:当我们要创建的对象很复杂的时候(通常是由很多其他的对象组合而成),我们要要复杂对象的创建过程和这个对象的表示(展示)分离开 来,这样做的好处就是通过一步 ...

  7. 阿里六面，挂在hrg，我真的不甘心！

    前言最近跟一位朋友聊天,福报场-阿里是大部分程序员的梦想.这位老哥梦想进入阿里很久了,连续两年面试阿里不同bu,有几次是技术面挂,最冤的一次是技术6面了,连P10大老板都面了,但是挂在了hrg. 我以 ...

  8. 对比讲解lambda表达式与传统接口函数实现方式

    在本号之前写过的一些文章中,笔者使用了lambda表达式语法,一些读者反映说代码看不懂.本以为java 13都已经出了,java 8中最重要特性lambda表达式大家应该都掌握了,实际上还是存在大量的 ...

  9. API gateway 之 kong 基本介绍 （一）

    一.API网关概念介绍 API 网关,即API Gateway,是大型分布式系统中,为了保护内部服务而设计的一道屏障,可以提供高性能.高可用的 API托管服务,从而帮助服务的开发者便捷地对外提供服务, ...

  10. Coremail接口存配置读取漏洞POC

    Coremail产品诞生于1999年,经过二十多年发展,如今从亿万级别的运营系统,到几万人的大型企业,都有了Coremail的客户. 截止2019年,Coremail邮件系统产品在国内已拥有10亿终端 ...