带左右箭头图片切换

jQuery效果 专栏收录该内容
3 篇文章 0 订阅
<!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> 
  • 2
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值