js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

今天来分享一下鼠标点击按钮，图片进行切换图片自动切换点击左右按钮图片进行切换的三种效果的组合代码。

最后的效果如下：

超文本标记语言代码部分：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' Generator ' content=' EditPlus ' meta name=' Author ' content=' meta name=' Keywords ' content=' meta name=' Description ' content=' title '图片轮播效果制作_赵一鸣随笔博客/title link rel='样式表type=' text/CSS ' href=' CSS/style。CSS ' script type=' text/JavaScript ' src=' http : js/jquery。js/script脚本类型=' text/JavaScript ' src=' http : js/style。js '/script/head body div class=' banner ' ul class=' pic '阿利href=' # ' img src=' http : images '美女宽度='350 '高度='495'/a /li阿利href=' # ' img src=' http : images/2。jpg ' alt='美女宽度='350 '高度='495'/a /li阿利href=' # ' img src=' http : images/3。jpg ' alt='美女宽度='350 '高度='495'/a /li阿利href=' # ' img src=' http : images/4。jpg ' alt='美女宽度='350 '高度='495'/a /li阿利href=' # ' img src=' http : images/5。jpg ' alt='美女宽度='350 '高度=' 495 '/a/Li/ul class=' anniu ' Li class=' on '/Li Li/Li Li/Li/ul class=' lr ' Li class=' pre ' a href=' # ' a/Li Li class=' next ' a href=' # ' a/Li/ul/div/body/html CSS代码部分：

* { margin :0 pxpadd :0 px } Li { list-style : none } a { text-decision : none } img { border :0 px } .横幅{宽度：350像素高度：495 pxmargin:100px汽车位置：相对；飞越(隐藏的).班纳pic { width:9999px高度：495px} .班纳pic li { width:350px高度：495 pxfloat:left} .班纳anniu { width :100 pxh three :16 px位置：绝对；left :165 xtop :470 px } .班纳anniu Li { width :16 pxh three :16 px背景：白色；float : leftmargin :2 pxdisplay : inlinecursor :指针指针；边框-半径：100%}。班纳anniu li.on{background:red} .班纳lr { width:350px高度：50 px位置：绝对；top:250pxdisplay:none} .班纳lr a{color:white} .班纳lr .pre { width:20px高度：50 pxfloat : leftbackground : none重复滚动0px 0px rgba(1，0，0，0.6)；文本对齐：居中；线高：50 px光标：指针} .班纳lr .下一个{宽度：20像素高度：50 px右浮动：背景： one重复滚动0px 0px rgba(1，0，0，0.6)；文本对齐：居中；线高：50 pxcursor:pointer}Javascript代码部分：

$(function(){ //鼠标滑过横幅，左右按钮进行显示和隐藏$('.横幅')。悬停(函数(){ $(').lr ').show()；}，function(){ $(' .lr ').hide()；});//点击下面的小按钮，图片进行左右切换效果$('.'安妮李' .单击(function(){ $(this)).addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；var num=$(this).index()；$('.pic ').动画({marginLeft:-350*num}，'慢速')；});//图片自动轮播效果var a=0；var automatic=setInterval(function(){ a；a=a % 5；$('.pic ').动画({marginLeft:-350*a}，'慢速');$('.安妮李' .情商(a)1 .addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；},6000);//点击左右按钮，图片进行切换效果$('.' pre ' .click(function(){ a-；a=(a 5)% 5；$('.pic ').动画({marginLeft:-350*a}，'慢速');$('.'安妮李' .情商(a)1 .addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；});$('.下一个')。单击(function(){ a；a=a % 5；$('.pic ').动画({marginLeft:-350*a}，'慢速');$('.安妮李' .情商(a)1 .addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；});});