<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#viewBox{
position: relative;
width: 1226px;
height: 460px;
margin: 50px auto;
overflow: hidden;
}
ul{
width: 7356px;
position: absolute;
left: 0;
}
ul li{
float: left;
}
img{
width: 1226px;
height: 460px;
}
#pre,
#next{
position: absolute;
width: 41px;
height: 69px;
background-image: url("img/icon-slides.png");
background-repeat: no-repeat;
color: #fff;
top: 50%;
font-size: 20px;
line-height: 60px;
text-align: center;
cursor: pointer;
}
#pre{
left: 0;
background-position: -84px 50%;
}
#pre:hover{
background-position: 0 50%;
}
#next{
right: 0;
background-position: -125px 50%;
}
#next:hover{
background-position: -42px 50%;
}
#dot{
position: absolute;
bottom: 20px;
right: 20px;
}
#dot span{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #7d7d7d;
margin-left: 10px;
border:2px solid rgba(0,0,0,.4);
}
#dot span.active{
background-color: #e1e1e1;
}
</style>
</head>
<body>
<div id="viewBox">
<ul>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32cadfb485a10bdcae1f7c20cbee52ba.jpg?w=2452&h=920" alt=""/></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/30e16d3039339544df124e1f093b2e07.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ac6bc74d8ad846e759471ffce1f53202.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1b1d3d2a8e50d6445d471322b70d3aea.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f8d27f0498561818146b7ef78392f33.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""/></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32cadfb485a10bdcae1f7c20cbee52ba.jpg?w=2452&h=920" alt=""/></li>
</ul>
<p id="dot"> <span class="active"></span><span></span><span></span><span></span><span></span> </p>
<span id="pre"> </span>
<span id="next"> </span>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
var index=0;
var timer;
$("#pre").click(function () {
index--;
if(index<0){
index=$("ul li").length-1;
$("#viewBox ul").css({"left":-index*1226});
index--;
}
$("#viewBox ul").stop();
$("#viewBox ul").animate({"left": -index*1226});
$("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
});
$("#next").click(function () {
index++;
if(index==$("ul li").length-1){
$("#dot span").eq(0).addClass("active").siblings("span").removeClass("active");
}
if(index>$("ul li").length-1){
index=0;
$("#viewBox ul").css({"left":-index*1226});
index++
}
$("#viewBox ul").stop();
$("#viewBox ul").animate({"left": -index*1226});
$("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
});
$("#dot span").mouseover(function () {
index=$(this).index();
$("#viewBox ul").stop();
$("#viewBox ul").animate({"left": -index*1226});
$(this).addClass("active").siblings("span").removeClass("active");
})
timer = setInterval(function(){
index++;
if(index==$("ul li").length-1){
$("#dot span").eq(0).addClass("active").siblings("span").removeClass("active");
}
if(index>$("ul li").length-1){
index=0;
$("#viewBox ul").css({"left":-index*1226});
index++
}
$("#viewBox ul").stop();
$("#viewBox ul").animate({"left": -index*1226});
$("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
},3000);
$("#viewBox").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
index++;
if(index==$("ul li").length-1){
$("#dot span").eq(0).addClass("active").siblings("span").removeClass("active");
}
if(index>$("ul li").length-1){
index=0;
$("#viewBox ul").css({"left":-index*1226});
index++
}
$("#viewBox ul").stop();
$("#viewBox ul").animate({"left": -index*1226});
$("#dot span").eq(index).addClass("active").siblings("span").removeClass("active");
},3000);
})
</script>
</body>
</html>
jq 轮播图(移动) 
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)