JS implementation mouse can achieve the effect of left and right scrolling

Basic personnel with the following key knowledge are required ：

master html Basic elements basic knowledge

master css Layout Basics

js Sports Basics

This example is very simple , The most important thing is to take the postgraduate entrance examination

style css

*{
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}
img{
	border:0;
}
/*  control  */
.control{
	border-bottom: 1px solid #ccc;
	background-color: #eee;
	text-align: center;
	padding: 20px 0; /*  Up and down distance 20px  about 0 */
}
#showmsg{
	font-size: 25px;
}
.roll{
	width: 880px;
	height: 108px;
	margin: 50px auto;
	position: relative;
}
.roll ul{
	position: absolute;
	top: 0;
	left: 0;
}
.roll li{
	float: left;
	width: 182px;
	height: 108px;
	
}
.roll li a:hover{
	position: relative;
	top: 2px;
}
.roll .wrap{
	width: 728px;
	height: 108px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
/*  Left button  */
.btn_left{
	display: block;
	width: 68px;
	height: 68px;
	background: url(../images/btn.jpg) no-repeat -70px -69px ;
	position: absolute;/* // The absolute positioning will be off the mark   Won't occupy a position  */
	top: 20px;
	left: 1px;
	z-index: 1;
}
.btn_left:hover{
	background-position: -70px 0;
}
.btn_right{
	width: 68px;
	height: 68px;
	background: url(../images/btn.jpg) no-repeat 1px -69px;
	position: absolute;
	right: 1px;
	top: 20px;
	z-index: 1;
}
.btn_right:hover{
	background-position: 1px 0;
}

js File configuration , Realize interactive animation effect

// Implement tab control scrolling 
var g_bMoveLeft=true;
var g_oTimer = null;
var g_otimeout=null;
var g_bPause=true;
var g_iPauseTime =1000;
var g_iSpeed=2;
var arr = ['1','2','3','4','5','6','7','8'];
var index_arr = 0;
window.onload=function(){
	var oDiv = document.getElementById('roll');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var aA = oDiv.getElementsByTagName('a');
	//var oMsg = document.getElementById('showmsg'); // Display information in the control panel 
	
	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; // towards ul Add content tags to tags 
	// alert(aLi.length);
	// alert(aLi[0].offsetWidth);
	//oUl.style.width='728px';// To give ul The label width   because html There are no settings in the layout ul Any width of the label , Altitude information 
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; // Set up ul The width of the label 
	// alert(oUl.offsetLeft+' '+oUl.style.width);
	for(var i=0;i<aLi.length;i++){
		aLi[i].onmouseover=function(){
			stopMove();
		}
		aLi[i].onmouseout=function(){
			startMove(g_bMoveLeft);
		}
	};
	// scroll left 
	aA[0].onmouseover=function(){
		startMove(true);
	}
	aA[1].onmouseover=function(){
		// stateOchk(this);
		startMove(false);
	};
	startMove(g_bMoveLeft); // Default on timing 
	document.getElementById('showmsg').innerHTML=arr[0];//
	//  Rolling speed 
	oSeep.onchange=function(){
		g_iSpeed=parseInt(this.value);
	};
	// Rolling time 
	oPauseTime.onchange=function(){
		g_iPauseTime=parseInt(this.value);
	}
}
// When the mouse moves in Img Destroy timer in tag 
function stopMove(){
	clearInterval(g_oTimer);
	g_oTimer=null;
}
// Mouse removal div Turn on timer 
function startMove(btnleft){
	g_bMoveLeft=btnleft;
	if(g_oTimer){// Destroy the timer if it exists 
		clearInterval(g_oTimer);
	}
	g_oTimer=setInterval(doMove,30);
}
function doMove(){
	var oDiv = document.getElementById('roll'); // Get scrolling div
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var ali = oUl.getElementsByTagName('li');// obtain li Element collection for 
	var lt = oUl.offsetLeft;
	if(g_bMoveLeft){ //true  Means to scroll left  false Means to scroll right 
		lt-=g_iSpeed;
		if(lt<-oUl.offsetWidth/2){// If left scrolling is less than ul Negative half  [ If the width 12  commonly 6 (lt = -6+6=0 ) Equivalent to lt=0]
			lt += oUl.offsetWidth/2;
		}
	}else{ // Scroll right 
		lt+=g_iSpeed;
		if(lt>0){ // Default 0 0
			lt=-oUl.offsetWidth/2;
		}
	};
	if(g_bPause){ //true  It means that the control can adjust the speed 
		if(Math.abs(lt-Math.round(lt/ali[0].offsetWidth)*ali[0].offsetWidth)<Math.ceil(g_iSpeed/2)){ // If the width of the picture is not enough to move 
			stopMove();// Destroy timer 
			g_otimeout=setTimeout(function(){// Turn on the delay timer 
			tabMsg();
				startMove(g_bMoveLeft);
			},g_iPauseTime);
			lt=Math.round(lt/ali[0].offsetWidth)*ali[0].offsetWidth;
		}
	};
	oUl.style.left=lt+'px';
}
// Switch picture text messages 
function tabMsg(){
	index_arr++;
	// alert(index_arr);
	if(index_arr>arr.length-1){
		index_arr=0;
	}
	document.getElementById('showmsg').innerHTML=arr[index_arr];
}

The layout file shows htnl

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<script src="js/style2.js"></script>
</head>
<body>
<div class="control"> <!--  Control panel  -->
	<span id="showmsg">22222</span>
</div>	
<div class="roll" id="roll">
	<a href="javascript:;" class="btn_left"></a>
	<a href="javascript:;" class="btn_right"></a>
	<div class="wrap">
		<ul>
		<li><a href="https://img0.baidu.com/it/u=3111055842,4088346805&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" target="_parent"><img src="images/1.jpg" alt="1.jpg"></a></li>
		<li><a href="https://img0.baidu.com/it/u=3111055842,4088346805&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" target="_blank"><img src="images/2.jpg" alt="2.jpg"></a></li>
		<li><a href="https://img0.baidu.com/it/u=3111055842,4088346805&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" target="_search"><img src="images/3.jpg" alt="3.jpg"></a></li>
		<li><a href="https://img0.baidu.com/it/u=3111055842,4088346805&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" target="_top"><img src="images/4.jpg" alt="4.jpg"></a></li>
		</ul>
	</div>
</div>
</body>
</html>