步骤
html｛
<body>
<img src="../课堂/img/1.jpg" id="image" onmouseover="stop()" onmouseout="start()">
<button onclick="up()">上一页</button>
<button onclick="get(this)">1</button>
<button onclick="get(this)">2</button>
<button onclick="get(this)">3</button>
<button onclick="get(this)">4</button>
<button onclick="get(this)">5</button>
<button onclick="get(this)">6</button>
<button onclick="get(this)">7</button>
<button onclick="get(this)">8</button>
<button onclick="next()">下一页</button>
</body>
｝
<script>
// 1.获取图片节点
var img=document.getElementById("image");
// 2.获取图片组成的数组
var imgs=["../课堂/img/1.jpg","../课堂/img/2.jpg","../课堂/img/3.jpg","../课堂/img/4.jpg","../课堂/img/5.jpg","../课堂/img/6.jpg","../课堂/img/7.jpg","../课堂/img/8.jpg",]
// 3.定义个计时器记录下数组的下标值
index=0;
function get(thi){
// 3.获取图片下的坐标
var index=thi.innerHTML-1;
img.src=imgs[index];
}
// 4.添加监听事件，并且判断
function up(){
if(index==0){
//如果当前是第一张图，那么上一张则是最后一张
index=imgs.length-1;
}else{
// 只要不是第一张则-1
index--;
}
// 将img元素节点中的src属性改为要切换的图片路径
img.src = imgs[index];
}
function next(){
if(index==imgs.length-1){
// 如果结果为最后一张图时，让index再为第一张图片
index=0;
}else{
// 只要是不是后一张图，让图片的下标加1
index++;
}
// 将img元素节点中的src属性改为要切换的图片路径
img.src = imgs[index];
}
// 5.添加定时器
// 定义一个定时器
var lunbo=null;
// 当开始的时候
function start(){
lunbo=setInterval(next,2000);
}
// 当取消的时候
function stop(){
clearInterval(lunbo);
}
// 6.开始轮播
start();
// 7.鼠标放到图上停止轮播，移走打开定时器(给图片添加事件监听即可)
</script>
jquery插入方式
先css 再js： 先框架css再自己css 先jquery 再框架 再自己