本文共 5384 字，大约阅读时间需要 17 分钟。

.html 结构文件

	
    		
    	
    
		
     		
     
			
      			
      			
      			
      			
      			
      			
      			
      		
     
				
     		
     
			
      
			
      
			
      
			
      
		
     
		
     		
     
			
      <			
      >		
     
	
    

 

.css 样式文件

html, body, ul,img{	margin: 0;	padding: 0;}ul {	list-style: none;}/*图片位置设置*/.scroll, .scroll-img, img {	width: 613px;	height: 230px;}.scroll {	margin: 50px auto;	position: relative;	/*用户不可拖拽选中*/	user-select: none;		/*壁纸超出部位不可见*/	overflow: hidden;}/*设置轮播图片，为长条滚动显示*/.scroll-img{	position: absolute;	/*走马灯，壁纸长度为真图数加头尾两个假图*/	width: calc(613px * 6);	left:-613px;}.scroll-img img{	/*img浮动清除图片之间的空格*/	float: left;}/*右下选图按钮 tag*/ul{	position: absolute;	bottom: 10px;	right: 20px;}li{	/*画圈用于点击*/	width: 8px;	height: 8px;	border: 2px solid #888;	border-radius: 50%;	float: left;	margin-left: 10px;	background-color: transparent;	/*鼠标悬浮样式*/	cursor: pointer;}/*活跃状态下的li，变色*/li.active {	transition: .2s;	background-color: #999;}/*左右切换按钮*/.toggle-left, .toggle-right {	width: 40px;	height: 80px;	background-color: rgba(255,255, 255, 0.7);	line-height: 80px;	text-align: center;	font-size: 30px;	position: absolute;	top: 75px;	border-radius: 5px;	/*默认状态不可见*/	opacity: 0;}.toggle-left {	left: 2px;}.toggle-right {	right: 2px;}/*鼠标悬浮，可见，鼠标状态改变*/.scroll:hover .toggle-left, .scroll:hover .toggle-right {	transition: .1s;	opacity: 1;	cursor: pointer;}

 

.js 文件

// 自动滚动，一直做左移，到末尾假图重置// 使用定时器，加可控制参数scroll_disable// 图片数量var imgCount = 4;var timer = 0;// 用来保证进入单个动画能被完整结束var scroll_disable = false;function autoScroll() {	timer = setInterval(function () {		// false 进入		if(!scroll_disable){			// 用于确保进入之后，不执行完毕就被再次调用执行			scroll_disable = true;			// 总图已经滚动的距离，相对移动的左端			var current_left = $('.scroll-img').position().left;			// 滚动长度是图片的长度			var scroll_width = $('.scroll-img img').width();			// console.log(current_left);			// console.log(scroll_width);			// 动画操作,总图的拖拽操作			$('.scroll-img').animate({				left:current_left - scroll_width			},300,function () {				// 动画执行完毕重置可进入滚动的条件				scroll_disable = false;				// 图片停留在假图，进入判断				if(current_left<=-(scroll_width*imgCount))				{					$(this).css({						// 尾假图，变成相应的真图1的位置						left:-scroll_width					})				}			})			// tag操作，切换活跃的对象			// js操作获取绝对值			var index = Math.abs(current_left/scroll_width);			// 当index为图片数量，重置索引为0			if(index == imgCount){				index = 0;			}			// eq(index)  匹配一个给定索引值的元素			// siblings([expr]) 筛选同辈元素			// 链式赋值，对 .scroll-tag 子代中对应索引添加活跃状态，解除所有同辈的活跃状态			$('.scroll-tag').children().eq(index).addClass('active').siblings().removeClass('active');		}	},2500)}autoScroll()// 鼠标事件监控，悬浮清动画，离开启动// 悬浮显示左右按键，离开清除$('.scroll').mouseover(function () {	clearInterval(timer);})$('.scroll').mouseout(function () {	autoScroll();})// toggle-right 下一张图片，切换同自动轮播$('.toggle-right').click(function () {	if (!scroll_disable) {		// 在本次动画未结束时,让用户无法进行下一次点击		scroll_disable = true;		// console.log("right btn action");		// 图片右滚		// 点击一下右键,在原位置(left偏移)基础上往右滚一个图片宽度		// offset() 距离窗口左上角的top与left		// console.log($('.scroll-img').offset());		// position() 距离定位父级左上角的top与left		// console.log($('.scroll-img').position());		// 当前整个view的做左移量		var current_left = $('.scroll-img').position().left;		// 一次动画滚动的距离		var scroll_width = $('.scroll-img img').width();		$('.scroll-img').animate({			left: current_left - scroll_width		}, 300, function () {			scroll_disable = false;			// 显示末尾假图时			// console.log(current_left);			if (current_left <= -(scroll_width * imgCount)) {				// 切换为首位真图				$(this).css({					left: -scroll_width				})			}		})		// tag切换		var index = Math.abs(current_left / scroll_width);		// console.log(index);		if (index == imgCount) {			index = 0;		}		// tag下面的index索引指向的li变成活跃状态,该li的其他兄弟,都变成不活跃状态		$current_li = $('.scroll-tag').children().eq(index);		$current_li.addClass('active');		$current_li.siblings().removeClass('active');		// $('.tag').children().eq(index).addClass('active').siblings().removeClass('active');	}})// toggle-left$('.toggle-left').click(function () {	if (!scroll_disable) {		// 在本次动画未结束时,让用户无法进行下一次点击		scroll_disable = true;		// 当前整个view的做左移量		var current_left = $('.scroll-img').position().left;		// 一次动画滚动的距离		var scroll_width = $('.scroll-img img').width();		$('.scroll-img').animate({			left: current_left + scroll_width		}, 300, function () {			scroll_disable = false;			// 在首位假图时			// console.log(current_left);			if (current_left >= -scroll_width) {				// 切换为首位真图				$(this).css({					left: -scroll_width * imgCount				})			}		})		// tag切换 对应关系 1=>3 4=>2 3=>1 2=>0		var index = Math.abs(current_left / scroll_width) -2;		if (index == -1) {			index = imgCount-1;		}		// tag下面的index索引指向的li变成活跃状态,该li的其他兄弟,都变成不活跃状态		$current_li = $('.scroll-tag').children().eq(index);		$current_li.addClass('active');		$current_li.siblings().removeClass('active');		// $('.tag').children().eq(index).addClass('active').siblings().removeClass('active');	}})$('.scroll-tag').children().click(function () {	// console.log($(this).index());	// var $li = $(this);	// 切换活跃的tag li	$(this).siblings('.active').removeClass("active");	$(this).addClass('active');	// 当前点击点的索引	var current_index = $(this).index();  // 0 | 1 | 2 | 3	// 一次动画滚动的距离	var scroll_width = $('.scroll-img img').width();	console.log(current_index);	console.log(scroll_width);	// 切换图片 view	// 当前点击的父亲相邻哥哥，做动画	$(this).parent().prev().animate({		// +1 初始左侧有一张假图		left: -(current_index + 1) * scroll_width	}, 300)})