jquery手写广告轮播图,无限循环功能

2023-12-13 07:17:33


说明

在很多情况下,我们都需要开发广告轮播图,当我们进行页面的功能开发时,采用轮播图来实现也行,但是很多情况下,我们只需要简单的控制轮播循环轮播展示即可,所以用jq开开发广告轮播波,自定义方式比较灵活,而且还简单,只需要几行代码就可以实现广告轮播。

一、效果图

实现功能:循环滚动,向上下(左右滚动都可以)滚动,鼠标悬浮时取消滚动。

二、开发代码

用例:下面开发代码,广告向上滚动,左右滚动方法同理。

<style>
	.nav_box .search{
		display: none !important;
	}
	.div_box{
		margin-top: 50px;
		min-height: 600px;
		width: 100%;
	}
	.ad{
		width: 200px;
		height: 30px;
		margin: 0 auto;
		overflow: hidden;
	}
	ul,li,h3{
		line-height: 30px;
		cursor: pointer;
	}
</style>

<div class="div_box">
	<div class="ad">
		<h3 class="fl">[公告]</h3>
		<ul class="fl w_ul">
			<li>
				<span>这个是新闻广告1</span>
			</li>
			<li>
				<span>这个是新闻广告2</span>
			</li>
			<li>
				<span>这个是新闻广告3</span>
			</li>
			<li>
				<span>这个是新闻广告4</span>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
      var timer_ad = setInterval(roll_ad,1500);
	    $('.w_ul').hover(function(){//悬浮清除定时器
            clearInterval(timer_ad)
        },function(){//取消悬浮定时器开启
	        timer_ad = setInterval(roll_ad,1500);
      })
      function roll_ad(){
		$('.w_ul').animate({//滚动效果
			marginTop:'-30px',
		},500,function(){//滚动时长
            //滚动结束后执行方法
			$(this).css({marginTop:'0px'}).find('li:first').appendTo($(this));
            //将位置初始化,然后将第一个数据放到最后面
		})
	}	

</script>

文章来源:https://blog.csdn.net/weixin_43452154/article/details/134879454
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。