<!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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function lxfScroll(main,titleli,alt,speed){
var lxfscroll = $(main);
var ul = lxfscroll.find("ul");
var li = lxfscroll.find("li");
var tli = $(titleli);
var alt = $(alt);
var cutspeed = 350;//切换的速度
var autospeed = speed;//自动播放的速度
var n = 0;
var imgwidth = li.find("img").attr("width");//获取图片高度
var lilength = li.length;//获取图片数量
var timer;
li.eq(0).clone().appendTo(ul);
/* 标题按钮事件 */
function hoverscroll() {
tli.mouseenter(function(){
var index = tli.index($(this));
var lipoint = index*imgwidth;
var imgTitle = li.find("img").eq(index).attr("alt");
alt.text(imgTitle);
tli.removeClass("cur");
$(this).addClass("cur");
ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed);
});
};
/* 自动轮换 */
function autoroll() {
/*最后一个回到第一个的时候*/
if(n >= lilength+1) {tli.removeClass("cur").eq(0).addClass("cur"); ul.stop(true,false).css({left:"0px"});n = 1;};
var lipoint = n*imgwidth;
var imgTitle = li.find("img").eq(n).attr("alt");
ul.stop(true,false).animate({"left":-lipoint+"px"},cutspeed);
tli.removeClass("cur").eq(n).addClass("cur");
if(n >= lilength){tli.removeClass("cur").eq(0).addClass("cur"); };
alt.text(imgTitle);
n++;
timer = setTimeout(autoroll, autospeed);
if(n >= lilength+1) {alt.text(li.find("img").eq(0).attr("alt"));};
};
/* 鼠标悬停即停止自动轮换 */
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);
});
};
hoverscroll();
autoroll();//启动自动播放功能
stoproll();//启动鼠标悬停功能
};
$(function(){
lxfScroll(".lxfscroll",".lxfscroll-title li",".lxfscroll-alt",2000);
});
</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;font-size: 40px;font-weight: bold;background-color: #CCC;float: left;}
.lxfscroll-title {width: 400px;margin-left: auto;margin-right: auto;}
.lxfscroll-title li { float: left; text-align: center; border: 1px solid #CCC; margin-top: 4px; cursor: pointer; height: 20px; width: 20px; line-height: 20px; margin-right: 4px; border-radius:10px; }
.cur { color: #FFF; font-weight: bold; background:#666; }
.lxfscroll ul { position: absolute; width: 3000px; }
.lxfscroll-alt { position: absolute; bottom: 0px; z-index: 5; background-color: #666; color: #FFF; padding: 8px; Opacity=80);-moz-opacity:0.5; opacity: 0.5; width: 400px; overflow: hidden; }
.info { text-align: center; color: #666; }
.info a { color:#0000FF; }
</style>
</head>
<body>
<div class="lxfscroll">
<div class="lxfscroll-alt">www.niutw.com/web</div>
<ul>
<li><img src="http://images.movie.xunlei.com/gallery/553/1bea477d1e3d2ff44d01121a989c02c5.jpg" width="400" height="300" alt="www.niutw.com"/></li>
<li><img src="http://images.movie.xunlei.com/gallery/553/8dc8f0a4857b66af1f10cf01cbf9e713.jpg" width="400" height="300" alt="网页特效代码"/></li>
<li><img src="http://images.movie.xunlei.com/gallery/553/f993f1f47dfa8f2b2f553fd5d43a184e.jpg" height="300" alt="WEB前端开发"/></li>
<li><img src="http://images.movie.xunlei.com/gallery/553/77e7ec3a6fc65aa327948c56c0b97189.jpg" width="400" height="300" alt="唯美搭配网"/></li>
</ul>
</div>
<div class="lxfscroll-title">
<ul>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br />
</body>
</html>
