<!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>
<style>
*{margin:0px;padding:0px;list-style-type:none;}
.v_out{width:748px;margin:20px auto;overflow:hidden;}
.v_show{width:665px;overflow:hidden;position:relative;height:280px;float:left}
.v_cont{ width:6650px;position:absolute;left:0px;top:0px;}
.v_cont ul{float:left;text-align:center;line-height:50px;}
.v_cont ul li{width:665px;height:250px;background:#f8f8f8;float:left;margin-top:3px;}
/*---圆圈---*/
.v_out_p{position:relative;overflow:visible}
.circle{position:absolute;left: 40px;top: 290px;}
.circle li{width:120px;height:60px;float:left;margin-right:10px;background:#ccc}
.circle .circle-cur{background:#f00}
/*---切换---*/
.prev,.next{float:left;padding:105px 9px 0}
.prev a{ background:#f00;}
.prev .ico_1{ background:url(input_a.gif) no-repeat 0 -3757px;}
.next a{background:#f00 }
.next .ico_2{background:url(input_a.gif) no-repeat right -3757px;}
.prev,.prev a,.next,.next a{width:21px;height:28px; display:block}
</style>
</head>
<body>
<!--代码部分begin-->
<div class="v_out v_out_p">
<div class="prev"><a href="javascript:void(0)"></a></div>
<div class="v_show">
<div class="v_cont">
<ul>
<li index="0" style="background:#f00">[第1个]</li>
<li index="1" style="background:#ff0">[第2个]</li>
<li index="2" style="background:#f0f">[第3个]</li>
<li index="3" style="background:#999">[第4个]</li>
<li index="4" style="background:#666">[第5个]</li>
</ul>
</div>
</div>
<div class="next"><a href="javascript:void(0)"></a></div>
<ul class="circle">
<li class="circle-cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/1.4.4/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
var btnleft=$(".prev a");
var btnright=$(".next a");
var point=$(".circle > li");
//alert(point);
var img=$(".v_cont > ul >li")
var imgnum=$(".v_cont > ul > li").length;//得到图片的个数 var imgnum=img.length
var imgwidth=img.width();
var indeximg=0;//index是系统关键字
btnleft.click(function(){
//indeximg--;
if(indeximg>-4)
{
indeximg=indeximg-1;
// alert(0)
}
else
{
indeximg=0;
}
banner();
})
btnright.click(function(){
//index++;
if(indeximg>-1)
{
indeximg=-4;
}
else
{
indeximg=indeximg+1;
}
banner();
})
banner();
function banner(){
$(".v_cont").animate({left:imgwidth*indeximg+"px"},4000,function(){
//$(".v_cont").animate({right:imgwidth*indeximg+"px"},1000);
if(indeximg>-1)
{
indeximg=-4;
}
else
{
indeximg=indeximg+1;
}
banner();
});
point.eq(-indeximg).addClass("circle-cur").siblings().removeClass("circle-cur");
}
})
</script>
<!--代码部分end-->
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery原始左右滚动幻灯片(方便扩展)代码效果</title>
<style>
*{margin:0px;padding:0px;list-style-type:none;}
.v_out{width:748px;margin:20px auto;overflow:hidden;}
.v_show{width:665px;overflow:hidden;position:relative;height:280px;float:left}
.v_cont{ width:6650px;position:absolute;left:0px;top:0px;}
.v_cont ul{float:left;text-align:center;line-height:50px;}
.v_cont ul li{width:665px;height:250px;background:#f8f8f8;float:left;margin-top:3px;}
/*---圆圈---*/
.v_out_p{position:relative;overflow:visible}
.circle{position:absolute;left: 40px;top: 290px;}
.circle li{width:120px;height:60px;float:left;margin-right:10px;background:#ccc}
.circle .circle-cur{background:#f00}
/*---切换---*/
.prev,.next{float:left;padding:105px 9px 0}
.prev a{ background:#f00;}
.prev .ico_1{ background:url(input_a.gif) no-repeat 0 -3757px;}
.next a{background:#f00 }
.next .ico_2{background:url(input_a.gif) no-repeat right -3757px;}
.prev,.prev a,.next,.next a{width:21px;height:28px; display:block}
</style>
</head>
<body>
<!--代码部分begin-->
<div class="v_out v_out_p">
<div class="prev"><a href="javascript:void(0)"></a></div>
<div class="v_show">
<div class="v_cont">
<ul>
<li index="0" style="background:#f00">[第1个]</li>
<li index="1" style="background:#ff0">[第2个]</li>
<li index="2" style="background:#f0f">[第3个]</li>
<li index="3" style="background:#999">[第4个]</li>
<li index="4" style="background:#666">[第5个]</li>
</ul>
</div>
</div>
<div class="next"><a href="javascript:void(0)"></a></div>
<ul class="circle">
<li class="circle-cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/1.4.4/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
var btnleft=$(".prev a");
var btnright=$(".next a");
var point=$(".circle > li");
//alert(point);
var img=$(".v_cont > ul >li")
var imgnum=$(".v_cont > ul > li").length;//得到图片的个数 var imgnum=img.length
var imgwidth=img.width();
var indeximg=0;//index是系统关键字
btnleft.click(function(){
//indeximg--;
if(indeximg>-4)
{
indeximg=indeximg-1;
// alert(0)
}
else
{
indeximg=0;
}
banner();
})
btnright.click(function(){
//index++;
if(indeximg>-1)
{
indeximg=-4;
}
else
{
indeximg=indeximg+1;
}
banner();
})
banner();
function banner(){
$(".v_cont").animate({left:imgwidth*indeximg+"px"},4000,function(){
//$(".v_cont").animate({right:imgwidth*indeximg+"px"},1000);
if(indeximg>-1)
{
indeximg=-4;
}
else
{
indeximg=indeximg+1;
}
banner();
});
point.eq(-indeximg).addClass("circle-cur").siblings().removeClass("circle-cur");
}
})
</script>
<!--代码部分end-->
</body>
</html>
注：还需要在完善
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
