首页 > 代码库 > 幻灯-优化
幻灯-优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>幻灯-0.0.2</title>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}
ul li{list-style: none;}
a{text-decoration: none;}
.v_show{width: 960px; margin: 0 auto;position: relative;} /*此处可修改轮播图的宽度*/
/*焦点图样式*/
.v_content{}
.v_content ul{border: 1px solid #999; overflow: hidden;}
.v_content ul li{ position: relative; height: 230px;display: none;} /*此处根据需要修改幻灯的高度*/
.v_content ul li.blo{display: block;}
.v_content ul li img{position: absolute; left: 50%; top: 50%;}
/*焦点按钮样式*/
.v_caption{position: absolute; bottom: 10px; left: 0px;width: 100%;}
.v_caption ul{overflow: hidden;}
.v_caption ul li{ float: left;width: 20px;height: 20px; border: 1px solid #999; text-align: center;line-height: 20px;cursor: pointer; margin-right: 10px;border-radius: 100%;}
.active{background: red; color: #FFF;}
/*上一屏按钮样式*/
#pre{position: absolute;left: 10%; display: block; width: 70px; height: 70px; background: #333;top: 50%;margin-top: -35px; text-align: center; line-height: 70px;color: #FFF;z-index: 9999;}
/*下一屏按钮样式*/
#next{position: absolute;right: 10%; display: block; width: 70px; height: 70px; background: #333;top: 50%;margin-top: -35px; text-align: center; line-height: 70px;color: #FFF;z-index: 9999;}
/*CSS样式可以根据自己需要自行修改，如需修改CSS名称，请注意JQuery里面的全局变量的CSS名称变化*/
</style>
<script>
$(function(){
// 本版本修改了CSS，JQ代码：
// 1.用户可自由上传相同尺寸的图片，只需要在CSS中设置需要的幻灯的高度和宽度，即可自动实现幻灯图片的垂直和水平居中，解决了若幻灯为全屏需设置为背景的麻烦。
// 注:如果图片的长宽不一致，可将
// $cont_li.children("img").css("marginLeft",-parseInt($cont_li.eq(inde).children("img").width()/2));
// $cont_li.children("img").css("marginTop",-parseInt($cont_li.eq(inde).children("img").height()/2));
// 这两句代码放到change_li方法内，即可实现不同尺寸图片垂直和水平居中。
// 2.优化了代码，使代码更加的灵活，简洁，易读。
//定义的全局变量
var $cont_li = $("#content li");//获取轮播图的节点
var inde = 0; //节点的索引
var interval; //定时器
var caption_li = ""; //焦点列表
var $pre = $("#pre"); //上一屏按钮ID
var $next = $("#next"); //下一屏按钮ID
var act = "active"; //焦点选中状态CSS
var con_non = "non"; //轮播图的隐藏CSS
var con_blo = "blo"; //轮播图的显示CSS
var click_or_mouover = "click"; //焦点触发事件的状态
var con_mouse = true; //鼠标移动到轮播图上是否停止
var time_change = 1000; //轮播图切换的时间间隔
//居中显示轮播图片（不用设置为背景）
$cont_li.eq(0).addClass("blo");
$cont_li.children("img").css("marginLeft",-parseInt($cont_li.eq(0).children("img").width()/2));
$cont_li.children("img").css("marginTop",-parseInt($cont_li.eq(0).children("img").height()/2));
//通过轮播图节点的个数，动态生成焦点列表的个数
for (var i = 0; i < $cont_li.length; i++) {
caption_li += "<li>"+(i+1)+"</li>"; //此处为焦点的数字，不要写成"<li></li>"即可
};
$("#caption").append(caption_li); //添加到caption节点中
var $cap_li = $("#caption li"); //获取焦点图节点
$cap_li.eq(0).addClass("active"); //设置第一个焦点选中
//判断焦点总长度，并让其居中显示。
var $cap_li_width = ($cap_li.width()+parseInt($cap_li.css("margin-right"))+
2*parseInt($("#caption li").css("borderTopWidth")))*$cont_li.length;
$("#caption").css("width",$cap_li_width).css("margin","0 auto");
run(); //执行定时器方法
//定时器方法
function run(){
interval = setInterval(sets,time_change);
}
//执行的方法
function sets(){
change_li();
inde++;
if (inde>=$cont_li.length) {inde=0};
}
//提取出来的方法
function change_li() {
$cap_li.eq(inde).addClass(act).siblings().removeClass(act);
$cont_li.eq(inde).addClass(con_blo).siblings().removeClass(con_blo);
}
//焦点单击事件
$cap_li.on(click_or_mouover,function(){
$(this).addClass(act).siblings().removeClass(act);
inde = $(this).index();
$cont_li.eq(inde).addClass(con_blo).siblings().removeClass(con_blo);
})
if (con_mouse) {
//轮播图鼠标悬停事件
$cont_li.hover(function(){
clearInterval(interval); //清除定时器
},function(){
run(); //重新绑定定时器
})
};
//上一屏幻灯
$pre.on("click",function(){
inde = $("."+act).index() - 1;
if (inde<0) {inde = $cont_li.length-1;}
change_li();
})
//下一屏幻灯
$next.on("click",function(){
inde = $("."+act).index() + 1;
if (inde>$cont_li.length-1) {inde = 0;}
change_li();
})
})
</script>
</head>
<body>
<div class="v_show">
<a href="javascript:void(0);" id="pre">上一页</a>
<div class="v_content">
<!-- 内容展示区 -->
<ul id="content">
<li><img src="http://www.mamicode.com/1.jpg" /></li>
<li><img src="http://www.mamicode.com/2.jpg" /></li>
<li><img src="http://www.mamicode.com/3.jpg" /></li>
<li><img src="http://www.mamicode.com/4.jpg" /></li>
<li><img src="http://www.mamicode.com/5.jpg" /></li>
<li><img src="http://www.mamicode.com/6.jpg" /></li>
<li><img src="http://www.mamicode.com/7.jpg" /></li>
<li><img src="http://www.mamicode.com/8.jpg" /></li>
<li><img src="http://www.mamicode.com/9.jpg" /></li>
<li><img src="http://www.mamicode.com/10.jpg" /></li>
</ul>
</div>
<div class="v_caption">
<!-- 焦点按钮 -->
<ul id="caption"></ul>
</div>
<a href="javascript:void(0);" id="next">下一页</a>
</div>
</body>
</html>
幻灯-优化