整理以前用jQuery实现的图片轮播效果。

1.不做操作时，自动轮播2.鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来3.手动轮播1:鼠标指向图片底部的小标按钮，可以切换对应的图片4.手动轮播2:点击左右箭头也可以切换图片

效果图：(PS:用软件捕捉的，不太会弄，感觉图片都失真了)

下面是代码区域：

**inde.html部分代码**

div class=' box ' ul class=' img ' Li class=' photo ' a href=' # ' img src=' http : images/1。jpg ' alt=' '//a/Li Li class=' photo ' a href=' # ' img src=' http : images/2。jpg ' alt=' '//a/Li class=' photo ' a href=' # ' img src=' http 3360 images/3。jpg ' alt=' ' .代码**。box { padding:0宽度： 800像素；高度： 500像素；margin: 0自动位置：相对；} ul . img { padd :0 margin : 0 auto } ul . img .照片{ list-style:无；绝对位置：显示器：无；} img {宽度： 800px高度： 500像素；}.盒子img .活动{显示：块；}.jt { width: 40px高度： 50px背景-color: rgba(0，0，0，0.5)；绝对位置：前：50%；边距-top :-25px；线高： 50pxfont-size : 30px颜色：白色；字体粗细： 800；文本对齐：中心；显示器：无；} # Jright { right : 0；}.numList { font-size : } 0；绝对位置：bottom:10px左侧： 50%;左边距：-70px；}.numList .num{背景色-颜色：黑色；宽度： 20px高度： 20像素边界半径： 50%;颜色：白色；文本对齐：中心；font-size : 14px显示器：内联块；}.numList .检查{底色-颜色：红色；}**main.js代码**

$(function(){ /*定义全局变量，用来记录表示显示的图片的下标*/var I=0；/*按图片的数量添加下标*/var size=$(' .照片')。size()；for(var j=1；j=尺寸；j){ var span=$(' span class=' num ' ' j '/span ')；$('.'numList ').追加(跨度)；} /*默认选中第一个下标和显示第一张图片*/$(.照片： eq(0)').添加CLaSS(' active ')；$(.num 3360 eq(0)').添加CLaSS(' check ')；/*手动轮播*/var handleimgcchange=function(){ $(' .数字' .每个（函数(){ $(此)).mouseover(函数(){ $(this)).兄弟姐妹()。removeClass("检查");$(这个)。添加CLaSS(' check ')；/*获得选择的下标值*/i=$(this).index()；$('.照片')。hide()；$('.照片')。方程式(I ).show()；});});};/*显示下一张图*/var move=function(){ I；if(isize-1){ I=0；} $('.数字' .方程式(I ).addClass('check ').兄弟姐妹()。removeClass("检查");$('.照片')。方程式(I ).显示()。兄弟姐妹()。hide()；};/*自动轮播*/var auto change=function(){ var t=setInterval(move，1000)；$('.方框')。悬停(function(){ $(this)).CSS({ '光标' : '指针' })；$('.JT ' .CSS({ ' display ' : ' block ' })；clearInterval(t)；}，function(){ $(' .JT ' .CSS({ ' display ' : ' none ' })；t=设置间隔(移动，1000);}) };/*设置左右箭头点击事件*/var jtL=function(){ $('#jtLeft ').点击(函数(){ I-；if(i0){ I=size-1；} $('.数字' .方程式(I ).addClass('check ').兄弟姐妹()。removeClass("检查");$('.照片')。方程式(I ).显示()。兄弟姐妹()。hide()；}) };var jtR=function(){ $('#jtRight ').单击(function(){ move()；}) };handleimgcchange()；auto change()；jtR()；jtL()；});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。