版权声明：Callback_heaven©版权所有 https://blog.csdn.net/weixin_41564885/article/details/80751926
原生JS实现过程：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container{
width:600px;
position: relative;
overflow: hidden;
}
.arrows{
width:600px;
position: absolute;
z-index:9999;
top:230px;
}
.arrow{
/*padding:50px;*/
color:#fff;
font-size:30px;
cursor: pointer;
padding-bottom: 5px;
}
.arrow:hover{
background: #000;
}
.ul_img{
list-style:none;
width:2400px;
height:460px;
border:1px solid;
padding:0;
transition:all 0.5s linear;
}
.ul_img li{
width:600px;
float:left;
position: relative;
}
.spans{
position: absolute;
z-index: 9999;
top:430px;
left:300px;
}
.spans span{
cursor: pointer;
color:#fff;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="arrows">
<span title="0" class="arrow"><</span>
<span title="1" style="float:right;" class="arrow">></span>
</div>
<ul class="ul_img">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
<div class="spans">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>
</div>
<script type="text/javascript">
//需要定义的变量：
var ul = document.getElementsByClassName('ul_img') //获取ul
var arrows = document.getElementsByClassName("arrows") //获取arrows
var spans = document.getElementsByClassName('spans')[0].childNodes //获取spans
var span = [] //存放span的数组
var count = 0 //用于计数
var isgo = false //用于判断左右
var firstWidth = ul[0].childNodes[1].offsetWidth //首宽 用于计算
var timer = null //定时器
//将span放入spans中
for(var i =0 ; i<spans.length ; i++){
if(spans[i].nodeName !== '#text'){
span.push(spans[i])
}
}
//定义最初的span的颜色
span[0].style.background = '#ee5889'
//定时器自动播放
showTimer();
function showTimer(){
timer = setInterval(function(){
if(isgo == false){
count++
if(count > span.length -1){
count = 0
isgo = true
}
}else{
count --
if(count < 0){
count = 0
isgo = false
}
}
ul[0].style.transform = 'translate(' + count * -firstWidth + 'px)'
for(var i=0; i<span.length;i++){
span[i].style.background = ''
}
span[count].style.background = '#ee5889'
},4500)
}
//为arrow绑定事件
for(var i = 0 ; i < arrows.length ; i++){
arrows[i].onclick = function(e){
if(e.target.title == 1){
count ++
if(count > span.length -1){
count = 0
}
}else{
count --
if(count < 0){
count = span.length - 1
}
}
ul[0].style.transform = 'translate(' + count * -firstWidth
+ 'px)'
for(var i=0; i<span.length;i++){
span[i].style.background = ''
}
span[count].style.background = '#ee5889'
}
arrows[i].onmouseover = function(){
clearInterval(timer)
}
arrows[i].onmouseout = function(){
showTimer()
}
}
//为span绑定单击事件
for(var i =0 ; i <span.length ; i++){
span[i].index = i
span[i].onclick = function(e){
for(var i = 0 ; i<span.length ; i++){
span[i].style.background = ''
}
this.style.background = '#ee5889'
count = this.index
ul[0].style.transform = 'translate(' + count * -firstWidth
+ 'px)'
}
}
//图片上的onmouseove
ul[0].onmouseover = function(){
clearInterval(timer)
}
ul[0].onmouseout = function(){
showTimer()
}
</script>
</body>
</html>使用jQuery改写：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.container{
width:600px;
position: relative;
overflow: hidden;
}
.arrows{
width:600px;
position: absolute;
z-index:9999;
top:230px;
}
.arrow{
/*padding:50px;*/
color:#fff;
font-size:30px;
cursor: pointer;
padding-bottom: 5px;
}
.arrow:hover{
background: #000;
}
.ul_img{
list-style:none;
width:2400px;
height:460px;
padding:0;
transition:all 0.5s linear;
}
.ul_img li{
width:600px;
float:left;
position: relative;
}
.spans{
position: absolute;
z-index: 9999;
top:430px;
left:300px;
}
.spans span{
cursor: pointer;
color:#fff;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="arrows">
<span title="0" class="arrow"><</span>
<span title="1" style="float:right;" class="arrow">></span>
</div>
<ul class="ul_img">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
<div class="spans">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(()=>{
var container = $('.container')
var ul = container.find('.ul_img')
var spans = container.find('.spans')
var span = []
var arrows = container.find('.arrows').children()
var oneWidth = ul.children()[0].offsetWidth
var count = 0
var isgo = false
var timer = null
span.push(spans.children())
//解决第一个span上色
span[0].css('background',function(i){
if( i == 0){
return "#ee6689"
}
})
//span变色函数
function spanColor(){
for(var i=0 ; i<span.length ; i++){
span[i].css("background","")
}
//jquery解决方案 同 span[count].style.background
span[0].css('background',function(i){
if( i == count ){
return "#ee6689"
}
})
}
//ul移动函数
function ulmove(){
ul.css('transform','translate('+ count * -oneWidth + 'px)')
}
//定时器
showTimer()
function showTimer(){
timer = setInterval(function(){
if(isgo == false){
count ++
if(count > 3){
count = 0
isgo = true
}
}else{
count --
if(count <0){
count = 0
isgo = false
}
}
ulmove()
spanColor()
},3000)
}
arrows.on('click',function(){
if(this.title == 1){
count++
if(count > 3){
count = 0
}
}else{
count --
if(count < 0){
count = 3
}
}
ulmove()
spanColor()
})
//span单击
for(var i =0 ; i<span[0].length ; i++){
span[0].on('click',function(e){
count = $(this).index()
ulmove()
for(var i =0 ; i<span.length;i++){
span[i].css('background',"")
}
$(this).css('background','#ee6689')
})
}
//鼠标移入移除事件
function fn_enter(){
clearInterval(timer)
}
function fn_leave(){
showTimer()
}
ul.on('mouseover',fn_enter)
ul.on('mouseout',fn_leave)
arrows.on('mouseover',fn_enter)
arrows.on('mouseout',fn_leave)
})
</script>
</body>
</html>