首先用原生js来写，京东轮播是用渐变的动画写的，改变图片的opacity值来改变的。
下面是html代码
<div class="box">
<ul class="item">
<li style="opacity: 1"><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<button class="leftBtn"><</button> <!-- 左按钮 -->
<button class="rightBtn">></button> <!-- 右按钮 -->
<ul class="page"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>基本结构就是外面一个大盒子box，里面有两个ul分别存放5张图片，和标有数字的5个点，当图片显示到那一张，对应的小点背景图片就变成白色的，其他的点背景颜色为红色，有一左一右两个按钮，可以左右切换图片。（按钮做的有点简陋也有点丑）
下面是css代码
.item li{
list-style: none;
width: 590px;
height: 340px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
img{
width: 100%;
height: 100%;
}
.leftBtn{
position: absolute;
left: 0;
top: 0;
}
.rightBtn{
position: absolute;
right: 0;
top: 0;
}
div{
position: relative;
width: 590px;
height: 340px;
}
.page{
position: absolute;
bottom: 50px;
left: 200px;
height: 30px;
}
.page li{
float: left;
width: 30px;
height: 30px;
list-style: none;
background: red;
border-radius: 50%;
line-height: 30px;
text-align: center;
}给外部一个div用的相对定位，里面的图片，按钮，小圆点都是用的绝对定位
下面是原生js代码
由于图片切换的动画和小圆点随图片切换改变背景颜色这两个会多次用到，首先把他们封装成函数，就可以缩短代码量
封装运动，代码如下：
function getStyle(ele,attr){ //获取行内元素的函数，就是获取运动元素的当前状态
if(ele.currentStyle){
return ele.currentStyle[attr]
}else{
return getComputedStyle(ele)[attr] //兼容ie
}
}
//可以传三个参数，一个是需要运动的元素，第二个是一个对象，把元素需要做的动画传进去，可以传多个值，第三是回调函数
function animate(ele, targetObj, callback) {
//清除可能存在的定时器
clearInterval(ele.timer)
//创建一个定时器，做运动
ele.timer = setInterval(function() {
//假设已经到了目的地
var flag = true;
for(var key in targetObj) {
//透明度变化比较特殊就单独列出来，首先判断传进来的参数是不是opacity
if(key == 'opacity') {
var target = targetObj[key]; //目标值
var dir = key; //获得变化的opacity
//除于8是为了做缓冲运动，由于opacity是0-1之间的数字为了方便做取整，在这里先让他*100
var speed = (target - parseFloat(getStyle(ele, key))) / 8 * 100
//三目运算
//为什么要取整那，像像素等一些属性当增加值小于0.5时就加不上去了
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//把当前样式加上增加值，赋值给元素
ele.style[key] = parseFloat(getStyle(ele, key)) + speed / 100;
//做判断是否完成运动
if(parseFloat(getStyle(ele, key)) != target) {
flag = false;
//console.log(key,'没有完成了')
}
} else {
var target = targetObj[key]; //目标值
var dir = key; //方向 例如left top
var speed = (target - parseInt(getStyle(ele, key))) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
ele.style[key] = parseInt(getStyle(ele, key)) + speed + 'px';
if(parseInt(getStyle(ele, key)) != target) {
flag = false;
//console.log(key,'没有完成了')
}
}
}
//判断一个下 所有的目标是否都完成了
if(flag) {
clearInterval(ele.timer)
//console.log('本次运动结束',callback)
if(callback) {
callback(); //调用回调函数
}
}
}, 80)
}
封装小红点背景变化，代码如下：
function showCurrentPagePoint(current) {
var page = document.getElementsByClassName('page')[0];
var lis = page.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].style.background = 'red';
}
lis[current].style.background = 'white';
}//拿到左右按钮
var rightBtn = document.getElementsByClassName('rightBtn')[0]
var leftBtn = document.getElementsByClassName('leftBtn')[0]
//记录当前显示的是第几张图片
var page = 0;
//先拿到图片的ul然后在拿到li
var item = document.getElementsByClassName('item')[0]
var itemLis = item.getElementsByTagName('li');showPagePonint(page) //初始值，图片显示第一张，第一个小圆点为白色定义一个变量page，这个page控制显示第几张图片，初始值为0
给右按钮添加点击事件，代码如下：
rightBtn.onclick = function(){
animate(itemLis[page],{opacity:0});//当前显示的图片消失
page++;
if(page == 5){ //做判断显示到第6张时跳到第一章
page = 0;
}
animate(itemLis[page],{opacity:1});//当前图片的下一张出现
//page 对应的小圆点显示
showPagePonint(page)
}给左按钮添加点击事件，左按钮和右按钮一样，只不过让page--就行了，代码如下：
leftBtn.onclick = function(){
animate(itemLis[page],{opacity:0});
page--;
if(page == -1){
page = 4;
}
animate(itemLis[page],{opacity:1});
//page 对应的小圆点显示
showPagePonint(page)
}自动轮播，自动轮播和右按钮的点击事件效果是一样，代码如下：
var timer = setInterval(function(){
rightBtn.onclick();
},2000)var box = document.getElementsByClassName('box')[0]
box.onmouseenter = function(){
clearInterval(timer)
}
box.onmouseleave = function(){
timer = setInterval(function(){
rightBtn.onclick();
},2000)
}鼠标点击小红点，显示相应图片，代码如下：
//鼠标点击 小点，就显示当前对应的图片
var pageUl = document.getElementsByClassName('page')[0];
var pageLis = pageUl.getElementsByTagName('li');
for(let i=0;i<pageLis.length;i++){
pageLis[i].onclick =function () {
showPagePonint(page)
animate(lis[page],{opacity:0});
animate(lis[i],{opacity:1})
page = i;
}}上面是用原生js写的，代码量比较多，下面用jq写一下，刚接触jq两天，只完成了基本功能，（忘大神见谅），jq中许多方法还不熟悉，模仿原生js的代码
给左右按钮添加点击事件，代码如下：
var p = 0
$('.rightBtn').click(function(){
p++;
$('.item li').css({opacity:0})
$('.item li').eq(p).animate({opacity:1})
$('.page li').eq(p).css({background:'white'}).siblings().css({background:'red'})
if(p==4){
p=-1;
}
})
$('.leftBtn').click(function(){
p--;
$('.item li').css({opacity:0})
$('.item li').eq(p).animate({opacity:1})
$('.page li').eq(p).css({background:'white'}).siblings().css({background:'red'})
if(p<=0){
p=5
}
})var timer = setInterval(function(){
$('.rightBtn').click()
},2000)鼠标放图片上轮播消失，移出继续轮播，代码如下：
$('.box').mouseenter(function(){
clearInterval(timer)
})
$('.box').mouseleave(function(){
clearInterval(timer)
timer = setInterval(function(){
$('.rightBtn').click()
},2000)
})点击小红点切换图片，代码如下：
$('.page li').hover(function(){
$(this).css({background:'white'}).siblings().css({background:'red'})
$('.item li').eq($(this).index()).animate({opacity:1}).siblings().animate({opacity:0})
console.log($(this).index())
p = $(this).index()
})jq核心思想就是写的少，用的多，写很少代码，能实现特别多的功能。