<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容IE8的jQuery幻灯片切换代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
body{
background: #494A5F;
color: #D5D6E2;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.poster-main{
position: relative;
margin: 50px auto;
}
.poster-main .poster-list .poster-item{
position: absolute;
left: 0;
top: 0;
}
.poster-main .poster-btn{
position: absolute;
top: 0;
cursor: pointer;
}
.poster-main .poster-prev-btn{
left: 0;
background: url("images/btn_l.png") no-repeat center center;
}
.poster-main .poster-next-btn{
right: 0;
background: url("images/btn_r.png") no-repeat center center;
}
</style>
</head>
<body>
<div class="poster-main" id="carousel" data-setting='{
"width":1000,
"height":300,
"posterWidth":600,
"posterHeight":300,
"scale":0.8,
"speed":1000,
"autoPlay":true,
"delay":3000,
"verticalAlign":"middle"
}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item"><a href="#"><img src="images/1.jpg" alt="" width="100%" /></a></li>
<li class="poster-item"><a href="#"><img src="images/2.jpg" alt="" width="100%" /></a></li>
<li class="poster-item"><a href="#"><img src="images/3.jpg" alt="" width="100%" /></a></li>
<li class="poster-item"><a href="#"><img src="images/4.jpg" alt="" width="100%" /></a></li>
<li class="poster-item"><a href="#"><img src="images/5.jpg" alt="" width="100%" /></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/Carousel.js"></script>
<script type="text/javascript">
$(function(){
Carousel.init($("#carousel"));
$("#carousel").init();
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>