您正在使用IPV4(3.236.50.252)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 14
2022年 端午节 16
2023年 元 旦 228
2023年 春 节 249
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JS实现左右无缝轮播图代码
内容摘要: title无缝轮播图/titlestyle*{margin:0;padding:0;}ul{list-style:none;}.banner{width:600px;height:300px;border:2pxsolid#ccc;margin:100pxauto;position:relative;overflow:hidden;}.img{positio......
<title>无缝轮播图</title>

<style>

*{margin:0;padding:0;}

ul{list-style:none;}

.banner{width:600px;height:300px;border:2pxsolid#ccc;margin:100pxauto;position:relative;overflow:hidden;}

.img{position:absolute;top:0;left:0}

.imgli{float:left;}

.num{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}

.numli{width:10px;height:10px;background:rgba(0,0,0,0.5);display:block;border-radius:100%;display:inline-block;margin:05px;cursor:pointer;}

.btn{display:none;}

.btnspan{display:block;width:50px;height:100px;background:rgba(0,0,0,0.6);color:#fff;font-size:40px;line-height:100px;text-align:center;cursor:pointer;}

.btn.prev{position:absolute;left:0;top:50%;margin-top:-50px;}

.btn.next{position:absolute;right:0;top:50%;margin-top:-50px;}

.num.active{background-color:#fff;}

</style>

<scriptsrc="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

</head>

<body>

<divclass="banner">

<ulclass="img">

<li><ahref="#"><imgsrc="img/1.jpg"alt="第1张图片"></a></li>

<li><ahref="#"><imgsrc="img/2.jpg"alt="第2张图片"></a></li>

<li><ahref="#"><imgsrc="img/3.jpg"alt="第3张图片"></a></li>

<li><ahref="#"><imgsrc="img/4.jpg"alt="第4张图片"></a></li>

<li><ahref="#"><imgsrc="img/5.jpg"alt="第5张图片"></a></li>

</ul>

<ulclass="num"></ul>//

<divclass="btn">

<spanclass="prev"><</span>

<spanclass="next">></span>

</div>

</div>

<script>

$(function(){

vari=0;

vartimer=null;

for(varj=0;j<$('.imgli').length;j++){//创建圆点

$('.num').append('<li></li>')

}

$('.numli').first().addClass('active');//给第一个圆点添加样式

varfirstimg=$('.imgli').first().clone();//复制第一张图片

$('.img').append(firstimg).width($('.imgli').length*($('.imgimg').width()));//将第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度

//下一个按钮

$('.next').click(function(){

i++;

if(i==$('.imgli').length){

i=1;//这里不是i=0

$('.img').css({left:0});//保证无缝轮播,设置left值

};

$('.img').stop().animate({left:-i*600},300);

if(i==$('.imgli').length-1){//设置小圆点指示

$('.numli').eq(0).addClass('active').siblings().removeClass('active');

}else{

$('.numli').eq(i).addClass('active').siblings().removeClass('active');

}

})

//上一个按钮

$('.prev').click(function(){

i--;

if(i==-1){

i=$('.imgli').length-2;

$('.img').css({left:-($('.imgli').length-1)*600});

}

$('.img').stop().animate({left:-i*600},300);

$('.numli').eq(i).addClass('active').siblings().removeClass('active');

})

//设置按钮的显示和隐藏

$('.banner').hover(function(){

$('.btn').show();

},function(){

$('.btn').hide();

})

//鼠标划入圆点

$('.numli').mouseover(function(){

var_index=$(this).index();

$('.img').stop().animate({left:-_index*600},150);

$('.numli').eq(_index).addClass('active').siblings().removeClass('active');

})

//定时器自动播放

timer=setInterval(function(){

i++;

if(i==$('.imgli').length){

i=1;

$('.img').css({left:0});

};

$('.img').stop().animate({left:-i*600},300);

if(i==$('.imgli').length-1){

$('.numli').eq(0).addClass('active').siblings().removeClass('active');

}else{

$('.numli').eq(i).addClass('active').siblings().removeClass('active');

}

},1000)

//鼠标移入,暂停自动播放,移出,开始自动播放

$('.banner').hover(function(){

clearInterval(timer);

},function(){

timer=setInterval(function(){

i++;

if(i==$('.imgli').length){

i=1;

$('.img').css({left:0});

};

$('.img').stop().animate({left:-i*600},300);

if(i==$('.imgli').length-1){

$('.numli').eq(0).addClass('active').siblings().removeClass('active');

}else{

$('.numli').eq(i).addClass('active').siblings().removeClass('active');

}

},1000)

})

})

</script>

上一篇:JavaScript实现钟表案例 下一篇:js简单倒计时实现代码
发布日期:2022/1/18
手机扫二维码直达本页
发布时间:12:43:58
点击:563
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022