jq轮播图——无缝轮播

css代码：

/* 整个轮播图 */
.banner{width: 520px;height: 280px;overflow: hidden;margin:10% auto;position: relative;
}
/* 图片部分 */
/* ul */
.banner-img{/* 宽度其实是不符合条件的,需要使用js去控制 */height: 100%;position: absolute;top: 0;left: 0;
}
.banner-img li{width: 520px;height: 100%;float: left;
}
.banner-img li a{width: 100%;height: 100%;
}
.banner-img li a img{width: 100%;height: 100%;
}
/* 实现按钮 */
.banner .banner-btn{position: absolute;height:40px;width: 100%;/* background: red; */top: 50%;margin-top: -20px;display: none;
}
/* 鼠标移入显示 */
.banner:hover .banner-btn{display: block;
}
.banner .banner-btn a{display: block;width: 40px;height: 40px;background: green;overflow: hidden;
}
.banner .banner-btn .nexBtn{float: right;
}
.banner .banner-btn a{background-color: #000;opacity: 0.3;filter: alpha(opcity=30);border-radius: 5px;
}
.banner .banner-btn i{margin-top: 8px;display: block;width: 100%;height: 24px;/* 使用一下精灵图,面包屑图 */background: url(http://gtms01.alicdn.com/tps/i1/T1szNBFzlmXXX8QSDI-400-340.png);
}
/* 左边的 */
.banner .prevBtn i{background-position: -190px 0;
}
/* 右边的 */
.banner .nexBtn i{background-position: -190px -24px;
}
/* 下面的小圆圈 */
.banner-circle{position: absolute;left:50%;/* margin-left: ; */height:13px ;bottom: 5px;border-radius:10px;/* opacity: 0.3;/* IE兼容 *//* filter: alpha(opcity=30); */background:rgba(255,255,255,0.3);
}
.banner-circle li{width: 9px;height: 9px;margin: 2px;float: left;
}
.banner-circle li a{display: block;width: 9px;height: 9px;border-radius: 50%;background:rgba(255,255,255,0.8);
}
.banner-circle .selected a{background: rgba(255,0,0,1);
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./css/reset.css"/><link rel="stylesheet" type="text/css" href="./css/banner.css"/></head><body><div class="banner"><!-- 放置图片 --><ul class="banner-img"><li><a href="#"><img src="./img/0.jpg" ></a></li><li><a href="#"><img src="./img/1.jpg" ></a></li><li><a href="#"><img src="./img/2.jpg" ></a></li><li><a href="#"><img src="./img/3.jpg" ></a></li><li><a href="#"><img src="./img/4.jpg" ></a></li><li><a href="#"><img src="./img/2.jpg" ></a></li></ul><!-- 放置两个前后按钮 --><div class="banner-btn"><a href="javascript:;" class="nexBtn"><i></i></a><a href="javascript:;"class="prevBtn"><i></i></a> </div><!-- 放置焦点 小圆圈 --><ul class="banner-circle"><!-- 计划是使用js的dom操作去添加集体的个数的小圆圈 --></ul></div></body><script src="./js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script><script>$(function(){//获取标签// 最大的轮播模块 ; 这里变量名称里面的$其实就是一个普通的字符var $banner = $('.banner');// 获取图片的父级ulvar $banner_ul = $('.banner-img');// 按钮的大块var $btn = $('.banner-btn');// 获取按钮的a标签var $btn_a = $btn.find('a');console.log($btn_a);// 定义一些有可能会使用到的变量// 定时器var timer = null;// 正在展示的页数var page = 1;// 运动的方向var btnClass = null;// 获取每一个li的宽度.也就是获取banner的宽度   轮播图的宽度var v_width = $banner.width();// ul的宽度根据li的个数决定// 获取li的个数var page_count = $banner_ul.find('li').length;//设置ul的宽度$banner_ul.width(v_width*page_count);//jquey设置元素的宽度的方法// 操作小圆圈var banner_cir = '<li class="selected"><a href="javascript:;"></a></li>';for (var i = 0; i < page_count-1; i++) {// 这里只是一个所有的小圆点拼接起来的字符串，还没有添加到页面中banner_cir += '<li><a href="javascript:;"></a></li>'}//添加小圆圈到页面中$('.banner-circle').append(banner_cir);//计算移动多少距离可以使得所有的小圆点居中var circle_left = $('.banner-circle').width() * 0.5;//通过margin-left设置所有的小圆点居中$('.banner-circle').css('marginLeft',circle_left*-1);//obj 让谁动//dir 向那个方向运动function move(dir){//正在运动的物体， 不能进行运动,如果正在动画，move对你不生效if(!$banner_ul.is(":animated")){//取反 正在运动 就是不运动//判断进行运动的方向if(dir == 'prevBtn'){//判断是否为第一个图片   需要单独处理第一张到第五张的请况if(page==1){$banner_ul.animate({left: (page_count-1)*v_width*-1});page = page_count;//处理小红点的移动circleMove();}else{//其他情况比较规律，每一次都是过一个图片的距离$banner_ul.animate({left: $banner_ul.position().left + v_width},"slow");page--;circleMove();}}else{//处理最后一张的特殊情况if(page==page_count){$banner_ul.animate({left:0})page=1;circleMove();}else{$banner_ul.animate({left:  $banner_ul.position().left - v_width},"slow");page++;circleMove();}}}}function circleMove(){$('.banner-circle li').eq(page-1).addClass('selected').siblings().removeClass('selected');}// 鼠标移入$banner.mousemove(function(){// 清除定时器clearInterval(timer);//链接操作}).mouseout(function(){timer = setInterval(move,1000);}).trigger('mouseout'); //一进来就触发一次鼠标移出效果，让页面直接动起来// 动起来// timer = setInterval(move,1000);// 左右按钮的鼠标移入移出以及点击$btn_a.mouseover(function(){$(this).animate({'opacity':0.6        //jquey已经帮我们考虑了兼容},'fast')}).mouseleave(function(){$(this).animate({'opacity':0.3   },'fast')}).click(function(){btnClass = $(this).attr('class');clearInterval(timer);timer = setInterval(move(btnClass),1000);});//点击小圆圈  这些小圆圈都是动态添加的// $('.banner-circle li').click(function(){//   console.log('111')// })//事件动态绑定机制$('.banner-circle li').on('click',function(){// 获取要展示的图片的编号var index = $('.banner-circle li').index(this);// 让banner动起来$banner_ul.animate({left: index * v_width * -1}, 'slow');page = index + 1;circleMove();})});</script>
</html>

jq轮播图——无缝轮播相关推荐

无缝轮播图无缝轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
用animation实现轮播图无缝衔接
思路使用animation来展示轮播图: 轮播分为两个独立的部分:位移与动效.使二者互不影响动效分为进入动画和退出动画在所有动效结束后位移 html部分 <body><u ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
web 完整轮播图前端轮播图详细
web 完整轮播图前端轮播图预览: 应用 HTML + CSS + JS HTML CSS JS 预览: 应用 HTML + CSS + JS JS代码分析如下: html代码比较简短,这里用j ...
JS-内置对象内置构造函数事件-拖拽轮播图无缝滚动
内置对象&内置构造函数日期时间格式 // 创建一个当前时刻的日期时间对象 var date = new Date(); // 获取date对象中的年月日时分秒 var y = date.ge ...
纯前端实现—JQ轮播图（轮播图完全版）
实现效果: 前面有篇文讲解过鼠标轮播图--https://gu-han-zhe.blog.csdn.net/article/details/121315021,还得鼠标点,有点麻烦,所以这篇给B格提升 ...

jq轮播图——无缝轮播

jq轮播图——无缝轮播相关推荐

最新文章

热门文章