[标签]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. MOOC python笔记(三) 序列容器：字符串、列表、元组

    容器概念 容器是Python中的重要概念,分为有序与无序. 有序容器也称为序列类型容器,如:字符串.列表. 通用序列容器操作 容器连接+ 加号可以把两个序列连接成一个更大的容器,相加后两个序列的值并不 ...

  2. java学习6-java基础类库

    1.与用户互动 2.系统相关 3.常用类 4.日期.时间类

  3. “selenium.common.exceptions.SessionNotCreatedException: Message: Unable to find a matching set of capabilities“解决办法

    问题: 原因:firefox浏览器版本和浏览器驱动版本不匹配 解决办法:卸载高版本浏览器,安装低版本浏览器 下载地址:http://ftp.mozilla.org/pub/firefox/releas ...

  4. “无处不在” 的系统核心服务 —— ActivityManagerService 启动流程解析

    本文基于 Android 9.0 , 代码仓库地址 : android_9.0.0_r45 系列文章目录: Java 世界的盘古和女娲 -- Zygote Zygote 家的大儿子 -- System ...

  5. 基于docker的mysql8的主从复制

    基于docker的mysql8的主从复制 创建mysql的docker镜像 构建docker镜像,其中数据卷配置内容在下面,结构目录如下 version: '3.7' services: db: # ...

  6. 基于深度学习方法的dota2游戏数据分析与胜率预测（python3.6+keras框架实现）

    很久以前就有想过使用深度学习模型来对dota2的对局数据进行建模分析,以便在英雄选择,出装方面有所指导,帮助自己提升天梯等级,但苦于找不到数据源,该计划搁置了很长时间.直到前些日子,看到社区有老哥提到 ...

  7. 第一篇：版本控制git之仓库管理

    ---恢复内容开始--- 再开始这个话题之前,让我想起了一件很痛苦的事情,在我大学写毕业论文的时候,我当时的文件是这样保存的 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc ...

  8. 运用ffmpeg实现压缩视频

    /// <param name="filePath">ffmpeg.exe的文件路径</param> /// <param name="Pa ...

  9. 在VMware下进行的使用ssh服务管理远程主机

    基于密钥的安全验证--sshd服务的配置文件解析(两台linux) 首先你有两台虚拟机  并且能够ping通(该实验的目的是通过客户端访问服务端) 打开终端进入到这个界面 看一下服务  如果有这三个服 ...

  10. Zabbix_agent 三 被动模式的配置

    zabbix一共有三种监控模式分别默认是被动模式,由agent端收集数据,server去请求然后获取agent的数据. 还有就是主动模式,由agent收集数据并定时发送到server端,则就是被动模式 ...