本代码实现的是横向循环滚动，
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery的焦点图（幻灯片）</title>
<script src="http://libs.useso.com/js/jquery/1.11.1-rc2/jquery.min.js"></script>
<style type="text/css">
/*引样式写法不支持IE8.0以下，可以简单修改下。不使用“>”即可。*/.slide {
width: 510px;
height: 260px;
overflow: hidden;
position: relative;
}
.slide>div {
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.slide>div>a {
display: inline-block;
float: left;
width: 510px;
height: 260px;
overflow: hidden;
}
.slide>ul {
width: 76px;
margin: 0 auto;
position: absolute;
z-index: 6;
left: 20px;
bottom: 16px;
}
.slide>ul>li {
width: 13px;
height: 13px;
overflow: hidden;
background: url(../images/index.png) no-repeat -350px -85px;
float: left;
display: inline;
margin: 0 3px;
cursor: pointer;
}
.slide>ul>li.on {
background-position: -370px -85px;
}
</style>
</head>
<body>
<div class="slide" id="slide">
<div class="clearfix"><a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/99189163731504.jpg" width="510" height="260"></a><a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/86068444730745.jpg" width="510" height="260"></a><a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/79618951727105.jpg" width="510" height="260"></a><a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/85264284696628.jpg" width="510" height="260"></a><a href="" title="" target="_blank"><img src="http://www.maiqiji.com/statics/uploads/shopimg/20150212/55074145695986.jpg" width="510" height="260"></a> </div>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(function($){
//幻灯片
var len = $("#slide>div>a").length,
strbtn = ‘‘,
index = 0,
picTimer;
$("#slide>div").width(len*510);
//按钮居中
$("#slide>ul").css({‘width‘:len*19+‘px‘,‘left‘:(510-(len*19))/2+‘px‘});
//按钮绑定事件
$("#slide>ul>li").mouseover(function() {
index = $("#slide>ul>li").index(this);
setSlide(index);
}).eq(0).trigger("mouseover");
//鼠标移入停止
$("#slide").hover(
function(){
clearInterval(picTimer);
},
function(){
picTimer = setInterval(function(){
setSlide(index);
index++;
if(index == len) {index = 0;}
},4000);
}
).trigger("mouseleave");
});
function setSlide(index){
$("#slide>div").stop(true,false).animate({left: ‘-‘+ index*510 +‘px‘}, "slow");
$("#slide>ul>li").removeClass(‘on‘).eq(index).addClass(‘on‘);
}
</script>
</body>
</html>
2015.3.3以此为基础修改渐变样式。
时间： 2024-11-08 21:59:51