jquery轮播+css

霹雳xiao虾

已于 2022-08-01 08:37:09 修改

阅读量94

点赞数

文章标签： jquery css javascript

于 2022-08-01 08:33:52 首次发布

本文链接：https://blog.csdn.net/u013357165/article/details/126060078

版权

文章目录

@[toc]

注意事项
源码运行一下看看

注意事项

假设 container 的宽度设置为 500px， li的宽度设置为100px，则可视区域显示5个图片，此时ul 下应至少有5个开始的图片，中间图片个数随意，最后应追加与最前面5个图片相同的图片。
看下图：

源码运行一下看看

<!DOCTYPE>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<!-- <script type="text/javascript" src="jquery-1.11.1.min.js"></script> -->
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
		body{
			padding:0;
			margin: 0;
		}
		#container{
			position: relative;
			left: 200px;
			top: 200px;
			border: 1px solid red;
			width: 500px;/* 视野可见的宽度, 如果可视范围内有3个li,li的宽度是100,则设置宽度大于300,小于400 */
			height: 150px;
			overflow: hidden;
		}
		#container ul {
			border: 1px solid blue;
			position: absolute;
			width: 3500px;  /* 需要设置足够宽,容纳所有的li */
			height:100%;
			margin:20px 0 0 0;
			padding: 0;
		}

		#container ul>li{
			list-style: none;
			float: left;
			position:relative;
		}
		.li_size{
			width: 100px;
			height: 100px;
		}
		#container img{
			width: 100%;
			height: 100%;
			
		}
		.enlargeLi{
			width: 130px;
			height:130px;
			margin: -20px -15px 0 -15px;
			z-index: 9;
		}
	</style>
	<script>
		var containerWidth ;//整个div的宽度
		var lunboInterval = 2000;//轮播频率 毫秒
		var slideInterval = 400; //li动画速度 毫秒
		var liWidth = 0, imgNum = 0, visiableImgNum = 0;//li的宽度 //图片的个数 //可视区域的图片个数
		var clickNum = 0, myleft = 0, toInitClickNum = 0;//点击次数 //距离左侧的绝对位置  //ul回归原始位置的点击次数
		
		var midPos = 0;//可视区域内中间 li 的下标
		
		$(function(){
			containerWidth = $('#container').width();
			liWidth = $("li").width();
			console.log('liwidth'+liWidth);
			imgNum = $('ul>li').length;
			console.log('imgNum:'+imgNum);
			visiableImgNum = $("#container").width() / liWidth;//可视区域的图片个数
			toInitClickNum = imgNum - visiableImgNum;
			console.log('toInitClickNum:'+toInitClickNum);
			midPos = parseInt((containerWidth /liWidth -1 )/2);
			// 设置可视范围内中间 li 的样式
			$('ul').children().eq(midPos).addClass('enlargeLi');

			setInterval(() => {
				toright();
			}, lunboInterval);
		})

		function changeMid(){
			//ul归位
			if(clickNum == 0){
				$('ul').children().eq(midPos).addClass('enlargeLi');
				$('ul').children().eq(toInitClickNum+1).removeClass('enlargeLi');//第二次出现第一个图片时,clickNum已经重置为0
			}else if(clickNum > 0){
				// ul正常移动
				$('ul').children().eq(midPos+clickNum).addClass('enlargeLi');//给 中间 li 的增加样式
				$('ul').children().eq(midPos+clickNum-1).removeClass('enlargeLi')//移除 中间左侧 li 的样式
			}
		}
		
		function toright(){
			clickNum++;
			myleft = -1 * clickNum * liWidth;//距离外部div的距离
			if(clickNum == toInitClickNum){//如果最后一个图已经出现了,ul恢复到初始位置(即 marginLeft=0)
				$("ul").hide(); //先隐藏,否则动画像后退
				$("ul").css({"margin-left": '0px'});
				$('ul').show();//显示-此时ul距离左侧为100px	
				$("ul").animate({marginLeft: '0px'}, 100);
				clickNum = 0;//点击次数归零
			}else{
				// 正常情况下的移动
				$("ul").animate({marginLeft: '-=100px'}, slideInterval);
			}
			// 改变中间li的样式
			changeMid();
		}
	</script>
</head>

<body>
	<button style="display: none;" onclick="toright()">向右</button>
	<div id="container">
		<ul>
			<li class="li_size"><img src="images/1.png" /></li>
			<li  class="li_size"><img src="images/2.png" /></li>
			<li  class="li_size"><img src="images/3.png" /></li>
			<li  class="li_size"><img src="images/4.png" /></li>
			<li  class="li_size"><img src="images/5.png" /></li>
			<li  class="li_size"><img src="images/6.png" /></li>
			<li  class="li_size"><img src="images/7.png" /></li>
			<li  class="li_size"><img src="images/8.png" /></li>
			<li  class="li_size"><img src="images/9.png" /></li>
			<li  class="li_size"><img src="images/10.png" /></li>
			
			<!-- 可视区域默认有几个,结尾需要增加几个img,且和前几个图片一致 -->
			<li  class="li_size"><img src="images/1.png" /></li>
			<li  class="li_size"><img src="images/2.png" /></li>
			<li  class="li_size"><img src="images/3.png" /></li>
			<li  class="li_size"><img src="images/4.png" /></li>
			<li  class="li_size"><img src="images/5.png" /></li>
		</ul>
	</div>
</body>

</html>