标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery仿淘宝无缝滚动效果</title>
<link rel="stylesheet" href="http://zuoqianduan.com/article/slider/css/style.css">
<script src="http://f3.v.veimg.cn/f2e/gallery/jquery/1.9.1/jquery.min.js"></script>
<script src="http://zuoqianduan.com/article/slider/js/slider1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.slider{
width: 520px; height: 280px;
}
.slider1{
width: 100%; height: 300px;
color: #fff;
}
.slider1 .play{
height: 100%;
}
.slider1 li{
text-align: center;
height: 100%;
font-size: 100px;
line-height: 300px;
}
.slider2{
margin: 30px auto;
}
</style>
</head>
<body>
<div class="slider slider1">
<ul class="play">
<li style="background: #c91520">1</li>
<li style="background: #ea8616">2</li>
<li style="background: #9ab22e">3</li>
<li style="background: #e6db5a">4</li>
<li style="background: #272822">5</li>
</ul>
<span class="next iconfont" >></span>
<span class="prev iconfont" ><</span>
</div>
<div class="slider slider2">
<ul class="play">
<li><img src="http://zuoqianduan.com/article/slider/images/1.png" width="520" height="280"></li>
<li><img src="http://zuoqianduan.com/article/slider/images/2.jpg" width="520" height="280"></li>
<li><img src="http://zuoqianduan.com/article/slider/images/3.jpg" width="520" height="280"></li>
<li><img src="http://zuoqianduan.com/article/slider/images/4.jpg" width="520" height="280"></li>
<li><img src="http://zuoqianduan.com/article/slider/images/5.jpg" width="520" height="280"></li>
</ul>
<span class="next iconfont" >></span>
<span class="prev iconfont" ><</span>
</div>
</body>
<script>
$(function(){
$(‘.slider1‘).Slider({
$elem: $(‘.slider1‘)
});
$(‘.slider2‘).Slider({
$elem: $(‘.slider2‘)
});
})
</script>
</html>
标签：
原文地址：http://www.cnblogs.com/lxqf/p/4212081.html
