带左右箭头图片切换

来源：互联网发布：w2003办公软件下载编辑：程序博客网时间：2024/05/01 06:38

<!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=gb2312" />

<title>无标题文档</title>

</head>

<style type="text/css">

*{margin:0px;padding:0px;}

.con{width:300px;height:200px;margin-left:500px;margin-top:200px;overflow:hidden;position:relative;z-index:1;}

.nav{width:90%;height:30px;position:absolute;bottom:0px;line-height:30px;left:0px;z-index:175;text-align:right;}

.nav dd{width:10px;height:10px;border-radius:10px;background:blue;display:inline-block;margin-left:5px;margin-top:10px;}

ul{width:5000px;position:relative;left:0px;z-index:55;}

ul li{float:left;list-style-type:none;}

ul li img{width:300px;height:200px;}

#art dd{float:left;width:300px;display:none;}

#con_show{display:none;}

#art{height:30px;line-height:30px;background:#000;color:#fff;font-weight:bold;z-index:66;width:100%;position:absolute;bottom:0px;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}

#btn{position:absolute;height:30px;z-index:55;width:300px;top:100px;}

#btn .L{background:url(w7_Arr.gif) no-repeat 0px 0px;width:18px;height:37px;display:block;float:left;}

#btn .R{background:url(w7_Arr.gif) no-repeat -18px 0px;width:18px;height:37px;display:block;float:right;}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

var rq_tit; //播放的tit 小蓝点555

var rq_con ; //播放的内容

var s_width ; //移动的距离，或是图片的宽度

var tmp_index = 0; //当前显示的图片，索引位置

var index_tit=0; //保存用户当前点的是第几张图片，索引位置

var speed //图片移动的距离

var dotai //动太生成点击 b索引函数

var time_auto = 2000; //播放的时间

var oAtr; //图片下面的文字DIV

var art_tit; //文字的DD

var Btn_r; //按钮

//开始移动,自动时间

function move(){

tmp_index = index_tit

//第一步，先变点的颜色

rq_tit.css('background','blue') //播放tit的初始颜色

rq_tit.eq(index_tit).css('background','green') //tit的当前颜色

//第二步：让图片开始移动

rq_con.stop().animate({'left':speed+"px"}) //图片移动的距离

//第三步：让文字DIV隐藏然后显示现在的

oAtr.stop().animate({'bottom':"-30px"},function(){ //文字区域下移

art_tit.hide().eq(index_tit).show() //当前文字显示

oAtr.stop().animate({'bottom':"0px"}) //文字区域上移

})

}

// 计算距离

// 1 向哪个方向移 2 移动多少

function js_jl(){ //如果当前点击的索引大于显示的图片索引时，向左

if(index_tit == 0){

speed = 0 //当前索引是0;距离就是左移0px;

}else {

speed = s_width*index_tit*-1 //;距离就是当前索引乘以图片距离 -1是向左移动;

}

move() //计算完距离开始移动

}

//动态获取用户点击图片索引

function dongtai(){

dotai = setInterval(function(){ //动态滚动，

index_tit++ //当前显示的图片开始移动，

if(index_tit >= rq_tit.length){ //图片的索引值大于蓝点的个数

index_tit = 0 //从0开始滚动

}

js_jl() //调用滚动距离

},time_auto);

}

$(function(){

rq_con = $(".con #scrol");//播放的内容

art_tit= $(".con #art dd");//文字DD

oAtr = $("#art");//图片下面的文字DIV

art_tit.eq(0).show();//当前文字显示

Btn_r=$('#btn .R'); //右箭头

Btn_l=$('#btn .L'); //右箭头

var num=rq_con.find('li').length ; //图片的个数

for(i=0;i<num;i++){ //循环 nav 下的dd 小蓝点

$('.nav').append("<dd></dd>"); //在nav中增加dd

}

rq_tit = $(".con .nav dd");//播放的tit 小蓝点

s_width = parseInt(rq_con.find("img").css("width"));//移动的距离，或是图片的宽度

$("#con_show").show(); //区域显示

rq_tit.eq(0).css('background','green'); //nav 中的第一个DD北京颜色是绿色

//当用户点击，要显示第几张图片时

rq_tit.click(function(){ //点击tit

clearInterval(dotai)//取消自动

var index_click = rq_tit.index(this);//获取当前点击的图片索引

if(index_click == tmp_index){

setTimeout(dongtai(),(time_auto+1000)); //3000秒之后执行自动滚动效果

return false;

}

index_tit = index_click;//获取点的是第几个

js_jl();

setTimeout(dongtai(),(time_auto+1000)); //3000秒之后执行自动滚动效果

})

dongtai() //执行自动

//当用户点击左右箭头时

Btn_r.click(function(){

clearInterval(dotai)//取消自动

if(tmp_index >= (rq_tit.length-1)){

index_tit = 0

}else{

index_tit++

}

js_jl();

setTimeout(dongtai(),(time_auto+1000)); //3000秒之后执行自动滚动效果

})

//当用户点击左右箭头时

Btn_l.click(function(){

clearInterval(dotai)//取消自动

if(tmp_index == 0){

setTimeout(dongtai(),(time_auto+1000)); //3000秒之后执行自动滚动效果

return false;

}else{

index_tit--

}

js_jl();

setTimeout(dongtai(),(time_auto+1000)); //3000秒之后执行自动滚动效果

})

})

</script>

<body>

<div class="con">

<div id='con_show'>

<dl class="nav">

</dl>

<ul id="scrol">

<li><img src="1.jpg" alt="" /></li>

<li><img src="2.jpg" alt="" /></li>

<li><img src="3.jpg" alt="" /></li>

<li><img src="1.jpg" alt="" /></li>

<li><img src="2.jpg" alt="" /></li>

<li><img src="3.jpg" alt="" /></li>

<li><img src="3.jpg" alt="" /></li>

</ul>

<dl id="art">

<dd>　aaaaaa</dd>

<dd>　bbbbbb</dd>

<dd>　cccccc</dd>

<dd>　aaaaa1a</dd>

<dd>　bbbbbb2</dd>

<dd>　cccccc3</dd>

<dd>　cccccc3</dd>

</dl>

<dl id="btn">

<a href="javascript:void(0)" class="L"></a>

<a href="javascript:void(0)" class="R"></a>

</dl>

</div>

</div>

</body>

</html>

0 0