Jquery自动切换图片
2014-08-17 21:45
218 查看
<!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>
<link href="XjhHomePage.css" rel="stylesheet" type="text/css"/>
<script>
//jquery 图片自动切换
$(function ()
{
var ul = $(".lxfscroll");
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("hover");
$(this).addClass("hover");
ul.css({ "left": "0px" });
li.css({ "left": "0px" });
li.eq(index).css({ "z-index": i });
li.eq(index).css({ "left": "540px" });
ul.animate({ left: "-540px" }, speed);
i++;
};
/* 自动轮换 */
function autoroll() {
if (n >= 5) {
n = 0;
}
tli.removeClass("hover");
tli.eq(n).addClass("hover");
ul.css({ "left": "0px" });
li.css({ "left": "0px" });
li.eq(n).css({ "z-index": i });
li.eq(n).css({ "left": "540px" });
n++;
i++;
timer = setTimeout(autoroll, autospeed);
ul.animate({ left: "-540px" }, 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>
</head>
<body>
<div class="focus">
<ul class="lxfscroll">
<li><a href="#"
target="_blank">
<img src="Imge/8c78ce0c-4af6-4205-abc7-56f62ff4af6c.jpg" width="536" height="278">
</a> </li>
<li><a href="#"
target="_blank">
<img src="Imge/6019718e-6ab6-42ec-86e2-0fecc91626c7.jpg" width="536" height="278"></a> </li>
<li><a href="#"
target="_blank">
<img src="Imge/a7e5177d-acc2-4aa1-9f71-a6094e9eb8b8.jpg" width="536" height="278">
</a></li>
<li><a href="#"
target="_blank">
<img src="Imge/c9c3c50a-f1a9-4797-96d9-2f92c804f1f3.jpg" width="536" height="278"></a>
</li>
<li><a href="#"
target="_blank">
<img src="Imge/1.jpg" width="536" height="278"></a>
</li>
</ul>
<ul class="lxfscroll-title">
<li class="hover">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
</body>
</html>
/*XhjHomePage.css*/
.focus
{
width: 536px;
margin-left: 0;
margin-right: auto;
margin-top: 10px;
position: relative;
height: 300px; /*border: 4px solid #EFEFEF;*/
overflow: hidden;
}
ul
{
margin:0px;
padding:0px;
}
.focus .lxfscroll
{
/*width: 536px;
margin-left: 0;
margin-right: auto;*/
margin-top: 0px;
position: relative;
/*border: 4px solid #EFEFEF;*/
list-style: none;
}
.focus .lxfscroll li
{
height: 300px;
width: 536px;
text-align: center;
height: 278px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
.lxfscroll-title
{
position:absolute;
display:block;
height: 7px;
width: 536px;
text-align: center;
margin-top: 284px;
}
.focus .lxfscroll-title li
{
width: 30px;
height: 8px;
margin: 0 10px;
background-color: #e6e6e6;
display: inline-block;
_display: inline;
overflow: hidden;
vertical-align: top;
zoom: 1;
line-height: 40px;
cursor: pointer;
}
.focus .lxfscroll-title .hover
{
background-color: #b01b15;
}
<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>
<link href="XjhHomePage.css" rel="stylesheet" type="text/css"/>
<script>
//jquery 图片自动切换
$(function ()
{
var ul = $(".lxfscroll");
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("hover");
$(this).addClass("hover");
ul.css({ "left": "0px" });
li.css({ "left": "0px" });
li.eq(index).css({ "z-index": i });
li.eq(index).css({ "left": "540px" });
ul.animate({ left: "-540px" }, speed);
i++;
};
/* 自动轮换 */
function autoroll() {
if (n >= 5) {
n = 0;
}
tli.removeClass("hover");
tli.eq(n).addClass("hover");
ul.css({ "left": "0px" });
li.css({ "left": "0px" });
li.eq(n).css({ "z-index": i });
li.eq(n).css({ "left": "540px" });
n++;
i++;
timer = setTimeout(autoroll, autospeed);
ul.animate({ left: "-540px" }, 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>
</head>
<body>
<div class="focus">
<ul class="lxfscroll">
<li><a href="#"
target="_blank">
<img src="Imge/8c78ce0c-4af6-4205-abc7-56f62ff4af6c.jpg" width="536" height="278">
</a> </li>
<li><a href="#"
target="_blank">
<img src="Imge/6019718e-6ab6-42ec-86e2-0fecc91626c7.jpg" width="536" height="278"></a> </li>
<li><a href="#"
target="_blank">
<img src="Imge/a7e5177d-acc2-4aa1-9f71-a6094e9eb8b8.jpg" width="536" height="278">
</a></li>
<li><a href="#"
target="_blank">
<img src="Imge/c9c3c50a-f1a9-4797-96d9-2f92c804f1f3.jpg" width="536" height="278"></a>
</li>
<li><a href="#"
target="_blank">
<img src="Imge/1.jpg" width="536" height="278"></a>
</li>
</ul>
<ul class="lxfscroll-title">
<li class="hover">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
</body>
</html>
/*XhjHomePage.css*/
.focus
{
width: 536px;
margin-left: 0;
margin-right: auto;
margin-top: 10px;
position: relative;
height: 300px; /*border: 4px solid #EFEFEF;*/
overflow: hidden;
}
ul
{
margin:0px;
padding:0px;
}
.focus .lxfscroll
{
/*width: 536px;
margin-left: 0;
margin-right: auto;*/
margin-top: 0px;
position: relative;
/*border: 4px solid #EFEFEF;*/
list-style: none;
}
.focus .lxfscroll li
{
height: 300px;
width: 536px;
text-align: center;
height: 278px;
position: absolute;
font-size: 40px;
font-weight: bold;
}
.lxfscroll-title
{
position:absolute;
display:block;
height: 7px;
width: 536px;
text-align: center;
margin-top: 284px;
}
.focus .lxfscroll-title li
{
width: 30px;
height: 8px;
margin: 0 10px;
background-color: #e6e6e6;
display: inline-block;
_display: inline;
overflow: hidden;
vertical-align: top;
zoom: 1;
line-height: 40px;
cursor: pointer;
}
.focus .lxfscroll-title .hover
{
background-color: #b01b15;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 实现横向滑动自动切换源码（同时显示多张图片）
- jquery 图片自动切换
- jquery 图片自动切换
- jquery 图片自动切换
- jQuery代码实现图片墙自动+手动淡入淡出切换效果
- jQuery实现图片与文字描述左右滑动自动切换的方法
- jquery图片自动切换
- JQuery实现图片切换（自动切换+手动切换）
- jQuery自动与手动图片切换效果下载
- JQuery中图片自动切换和手动切换
- JQuery的图片的切换和自动轮播
- jquery+js 图片切换和自动切换
- jQuery自动或手动图片切换效果
- jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
- jQuery图片自动切换（带左右切换按钮）
- Jquery全屏图片自动切换插件,支持窗口变化图片大小等比例变化
- jquery自动切换图片
- jQuery实现图片与文字描述左右滑动自动切换的方法