JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
16lz
2021-01-22
JQuery代码
<script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null; var btnClass = null; var page_count = $banner_ul.find('li').length; //把这个值赋给小圆点的个数 var banner_cir = "<li class='selected' href='#'><a></a></li>"; for (var i = 1; i < page_count; i++) { //动态添加小圆点 banner_cir += "<li><a href='#'></a></li>"; } $('.banner-circle').append(banner_cir); var cirLeft = $('.banner-circle').width() * ( - 0.5); $('.banner-circle').css({ 'marginLeft': cirLeft }); $banner_ul.width(page_count * v_width); function move(obj, classname) { //手动及自动播放 if (!$banner_ul.is(':animated')) { if (classname == 'prevBtn') { if (page == 1) { $banner_ul.animate({ left: -v_width * (page_count - 1) }); page = page_count; cirMove(); } else { $banner_ul.animate({ left: '+=' + v_width }, "slow"); page--; cirMove(); } } else { if (page == page_count) { $banner_ul.animate({ left: 0 }); page = 1; cirMove(); } else { $banner_ul.animate({ left: '-=' + v_width }, "slow"); page++; cirMove(); } } } } function cirMove() { //检测page的值,使当前的page与selected的小圆点一致 $('.banner-circle li').eq(page - 1).addClass('selected').siblings().removeClass('selected'); } $banner.mouseover(function() { $btn.css({ 'display': 'block' }); clearInterval(timer); }).mouseout(function() { $btn.css({ 'display': 'none' }); clearInterval(timer); timer = setInterval(move, 3000); }).trigger("mouseout"); //激活自动播放 $btn_a.mouseover(function() { //实现透明渐变,阻止冒泡 $(this).animate({ opacity: 0.6 }, 'fast'); $btn.css({ 'display': 'block' }); return false; }).mouseleave(function() { $(this).animate({ opacity: 0.3 }, 'fast'); $btn.css({ 'display': 'none' }); return false; }).click(function() { //手动点击清除计时器 btnClass = this.className; clearInterval(timer); timer = setInterval(move, 3000); move($(this), this.className); }); $('.banner-circle li').live('click', function() { var index = $('.banner-circle li').index(this); $banner_ul.animate({ left: -v_width * index }, 'slow'); page = index + 1; cirMove(); }); }); </script>
更多相关文章
- 用JavaScript实现两种功能:1、切换全选/全不选文字;2、根据选中个
- PHP数组值进入第二个数组[重复]
- mysql_fetch_array返回一个数组,数字为“1”
- php switch判断一个数所在的范围
- 在key/value的基础上将数组分组到另一个数组中
- 查找具有特定数据字符串的数组并返回其具有的另一个数据字符串
- 加入vs多个数据副本:性能
- c#操作mysql事务是不是要在一个数据库连接内完成?
- mysql数据库中查看当前使用的数据库是哪个数据库?