jQuery无缝轮播图代码

// html 代码
<div class="banner"><ul class="img"><li><a href="#"><img src="data:image/1.jpg"></a></li><li><a href="#"><img src="data:image/2.jpg"></a></li><li><a href="#"><img src="data:image/3.jpg"></a></li><li><a href="#"><img src="data:image/4.jpg"></a></li></ul><ul class="num"></ul><div class="btn btn_l">&lt;</div><div class="btn btn_r">&gt;</div>
</div>// jq 代码
$(function(){var i=0;var clone=$(".banner .img li").first().clone();$(".banner .img").append(clone);var size = $(".banner .img li").size();for(var j=0;j<size-1;j++){$(".banner .num").append("<li></li>");}$(".banner .num li").first().addClass('on');//鼠标划入圆点$(".banner .num li").hover(function(){var index=$(this).index();i=index;$(".banner .img").stop().animate({left:-index*1000},500);$(this).addClass('on').siblings().removeClass('on');})/*自动轮播*/var t=setInterval(function(){i++;move();},2000);//对banner定时器的操作$(".banner").hover(function(){clearInterval(t);},function(){t=setInterval(move(),2000);})/*向左按钮*/$(".banner .btn_l").click(function(){i++;move();})/*向右按钮*/$(".banner .btn_r").click(function(){i--;move();})function move(){if(i==size){$(".banner .img").css({left:0});i=1;}if(i==-1){$(".banner .img").css({left:-(size-1)*1000});i=size-2;}$(".banner .img").stop().animate({left:-i*1000},500);if(i==size-1){$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');}else{$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');}}
})
// style 样式
<style>
*{padding:0;margin:0;list-style: none;}
.banner{margin:100px auto; border:5px solid #000; width:1000px;height:640px;position: relative;overflow: hidden;
}
.banner .img{width:5000px;position: absolute;left:0px;top:0px;}
.banner .img li{float:left;
}
.banner .num{position:absolute;width:100%;bottom:20px;left:0px;text-align: center;font-size: 0px;
}
.banner .num li{width:10px;height:10px;background: #888;border-radius: 50%;display: inline-block;margin:0 3px;cursor: pointer;}
.banner .num li.on{background: #f00;
}
.banner .btn{width:30px;height:50px;background: rgba(0,0,0,0.5);position:absolute;top:50%;margin-top:-25px;cursor: pointer;text-align: center;line-height: 50px;color:#fff;font-size: 40px;font-family: "宋体";display: none;
}
.banner:hover .btn{display: block;
}
.banner .btn_l{left:0px;
}
.banner .btn_r{right:0px;
}
</style>

jQuery无缝轮播图代码相关推荐

左右无缝轮播html,JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: 无缝轮播图 *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;h ...
Jquery无缝轮播图
无缝轮播图示例如下注意事项 html里面一定要引入jquery的js文件 Jquery下载地址 HTML代码 <div class="banner"><ul c ...
jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码  <div class="wrap" ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
jquery实现动态左右无缝轮播图
JQ代码实现动态无缝轮播图功能相比之下运用jquery比js原生代码书写更为方便简介通俗易懂以下为代码: <!DOCTYPE html> <html><hea ...
html 无缝轮播图完整代码
1,实现轮播效果 2,实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
jQuery 实现轮播图
jQuery 轮播图预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...

jQuery无缝轮播图代码

jQuery无缝轮播图代码相关推荐

最新文章

热门文章