JQuery幻灯片 兼容所有主流浏览器 可任意控制速度 可任意添加多张幻灯片 可任意设置幻灯片的大小
匿名 · 更新于 2013/12/9
index.html HTML源代码
<!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>JQuery幻灯片 兼容所有主流浏览器 可任意控制速度 可任意添加多张幻灯片 可任意设置幻灯片的大小</title>
<link href="css/hdp.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--JQuery幻灯片 兼容所有主流浏览器 可任意控制速度 可任意添加多张幻灯片 可任意设置幻灯片的大小-->
<div id='jqhdp'>
<ul>
</ul>
<div class="hdp">
<!--单个幻灯片HTML代码块开始 如果需要多个幻灯片 则增加任意个单个幻灯片代码块即可-->
<div class="hdpcla" style="background:url(images/1.jpg) no-repeat;">
<div class="jqhdp_btn">
<div class="jqhdp_tit"><a>0项目地理位置 介绍</a></div>
<div class="jphdp_con"><a>位于加利福尼亚州的旧金山湾区作为世界的三大天然良港之一，以其得天独厚的交通优势和区位 优势成为了中国精品展示交易中心立足全美，辐射全球的重要腹地。中国品牌先锋工程首期启动的佛利蒙"中国精品展示交易中心"和奥克兰"中国精品城"皆设立 于此。了解更多>></a></div>
</div>
</div>
<!--单个幻灯片HTML代码块结束-->
<div class="hdpcla" style="background:url(images/2.jpg) no-repeat;">
<div class="jqhdp_btn">
<div class="jqhdp_tit"><a>1佛利蒙展示交易中心 介绍</a></div>
<div class="jphdp_con"><a>佛利蒙"中国精品展示交易中心"位于美国加州旧金山湾区东南部的阿拉米达县境，经营面积约 5万多平方米，位于著名高科技产业中心硅谷的核心，科技发达，人才汇聚，拥有一大批高学历、高收入人群，为"中国制造"深入美国市场奠定了雄厚的基础。了 解更多>></a></div>
</div>
</div>
<div class="hdpcla" style="background:url(images/3.jpg) no-repeat;">
<div class="jqhdp_btn">
<div class="jqhdp_tit"><a>2奥克兰精品城 介绍</a></div>
<div class="jphdp_con"><a>奥克兰"中国精品城"位于美国加利福尼亚州北部旧金山湾东湾，占地面积2万多平方米，地理 位置十分优越，陆海空交通便利，社会资源丰富，"中国精品城"以奥克兰为集散基地，可迅速将商品辐射至全美，进而影响整个北美地区。了解更 多>></a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script><!--导入Jquery.js脚本-->
<script type="text/javascript" src="js/hdp.js"></script><!--导入hdp.js脚本-->
</body>
</html>
hdp.css样式表源代码
/* CSS Document */
body{
background:#000;
}
#jqhdp{
width:767px;
height:462px;
border:1px solid #FFF;
position:relative;
overflow:hidden;
}
#jqhdp ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
bottom:58px;
right:20px;
/*margin-top:380px;*/
}
#jqhdp ul li{
width:12px;
height:12px;
margin-left:10px;
background:#ea601f;
float:left;
cursor:pointer;
}
#jqhdp div.hdpcla{
height:462px;
float:left;
}
#jqhdp div.jqhdp_btn{
height:80px;
width:767px;
float:left;
margin-top:382px;
background:rgba(0, 0, 0, 0.6) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=60); background:#000000;/*实现IE背景透明*/
}
#jqhdp div.jqhdp_btn div.jqhdp_tit{
height:32px;
font-size:13px;
font-weight:bold;
line-height:35px;
text-indent:1em;
color:#FFF;
}
#jqhdp div.jqhdp_btn div.jqhdp_tit a{
cursor:pointer;
}
#jqhdp div.jqhdp_btn div.jphdp_con{
color:#fff;
font-size:12px;
line-height:22px;
padding-left:1.2em;
}
#jqhdp div.jqhdp_btn div.jphdp_con a{
cursor:pointer;
}
#jqhdp a:hover{
color:#ccc;
}
hdp.js脚本源代码
// JavaScript Document
//鼠标落到对应li上
function liover($li){
$li.css("width","8");
$li.css("height","8");
$li.css("border","2px solid #fff");
if($li.index()!=$lastli.index()){//如果当前选择的li和上一次选择的li不是同一个 则恢复上一次选择的样式
$lastli.css("width","12");
$lastli.css("height","12");
$lastli.css("border","0");
//如果选择的不是上次选择的li 则需要执行切换函数
yidongli($li);
$lastli = $li;//记录当前选中的li
}
}
/*
*首先设置对应幻灯片数量的li 然后设置幻灯片容器div.hdp的宽度
*然后为每个li赋予鼠标落上去触发事件 执行的函数
*/
$(document).ready(function(e) {
//依据幻灯片的数量 设置幻灯片li的数量
var li_length = $("div.hdpcla").length;
for(var i = 0;i<li_length;i++){
$("#jqhdp").children("ul").append("<li></li>");
}
//设置hdp幻灯片容器的宽度
$("div.hdp").css("width",li_length*hdpcla_width);
$("#jqhdp").children("ul").children("li").mouseover(function(){
liover($(this));
})
});
var hdp_uptime = 20; //移动间隔时间（毫秒） 值越小 移动频率越高
var hdp_speed = 20; //移动速度（像素） 值越大 单位时间内移动距离越长
var hdpcla_width = parseInt($("div.hdp").children("div.hdpcla").css("width")); //hdpcla宽度
var hdp_yidongtime = Math.ceil(hdpcla_width/hdp_speed); //一次切换所需时间（固定）
var t = 0; //循环移动
/*
*移动li的函数
*/
function yidongli($li){
//如果当前选中的li与上一次选中的属于同一个 则不执行移动
if($li.index()==$lastli.index()) return;
//开始移动之前先结束上次移动
clearInterval(t);
//获取移动距离
var move_distance = getMoveDistance($li);
//获取单次循环需要移动的距离（此处可以控制无论移动几张幻灯片都消耗相同的时间[速度=距离/时间]）
var hdp_speed_tmp = Math.ceil(move_distance/hdp_yidongtime);
//alert("移动距离"+move_distance+" 移动速度"+hdp_speed_tmp);
t = setInterval(function(){
//获取hdp的margin-left距离
var left_tmp = parseInt($("#jqhdp").children("div.hdp").css("margin-left"));
//设置单次循环后hdp margin-left的距离
//alert(move_distance+" "+hdp_speed_tmp);
if(Math.abs(move_distance)>=Math.abs(hdp_speed_tmp)){ //如果剩余移动距离大于等于移动速度则 正常移动 注意：此处使用（剩余移动距离和移动速度）绝对值比较 因为如果反向移动 剩余距离是负数 所以会造成剩余距离一直小于移动速度的情况 只循环一次这完成移动
$("#jqhdp").children("div.hdp").css("margin-left",left_tmp-hdp_speed_tmp);
}else{ //如果剩余移动距离小于移动速度则直接将剩下的移动距离移动完成即可
$("#jqhdp").children("div.hdp").css("margin-left",left_tmp-move_distance);
//结束移动
clearInterval(t);
}
//记录循环后还剩下需要移动的距离
move_distance -= hdp_speed_tmp;
},hdp_uptime)
}
/*
*获取移动距离函数
*/
function getMoveDistance($li){
//先判断当前幻灯片是否归位 因为有时候用户会在一次移动未结束的时候 开始新的切换
//获取hdp的margin-left距离
var left_tmp = parseInt($("#jqhdp").children("div.hdp").css("margin-left"));
//计算正确归位应该的margin-left距离
var letftrue_tmp = 0-($lastli.index()*hdpcla_width);
//alert("当前margin-left距离"+left_tmp+" 正确归位的margin-left"+letftrue_tmp);
//计算本次移动不考虑上一次中途切换而需要的距离
var need_distance = ($li.index()-$lastli.index())*hdpcla_width;
//计算上一次移动应当归位的正确距离与当前margin-left距离之差 如果为0 说明不是用户在上一次移动中途切换的
var last_distance_cha = letftrue_tmp-left_tmp;
if(left_tmp!=letftrue_tmp){ //如果当前margin-left距离不等于上一次
//alert("中途切换");
//alert("当前margin-left距离"+left_tmp+" 正确归位的margin-left"+letftrue_tmp+" 本次需要移动的距离"+need_distance+" 最终实际需要移动的距离"+(need_distance-(letftrue_tmp-left_tmp)));
}
//最终实际需要移动距离[本次移动距离+上次移动没有完成的距离]（因为向左移动距离差是负数或0 向右移动距离差是正数或0 所以用减号减去负数等同于加上上次移动的距离的绝对值）
var final_distance = need_distance - last_distance_cha;
return final_distance;
}
$(document).ready(function(e) {
$li = $("#jqhdp").children("ul").children("li:eq(0)"); //当前选择的li
$lastli = $("#jqhdp").children("ul").children("li:eq(0)");
liover($lastli);
});