JS实现旗帜图片轮播效果（鼠标事件)

一。要实现的效果

1.点击左右可切换图片

2.点击小圆点可切换图片

二。效果图

三。代码

1.css

style type='text/css'body，img，span，ul，Li { margin : 0；padd : 0；} # div1 {宽度： 600px高度： 350像素；余量： 150像素自动；border: 10px固体# eee相对位置：} img { width: 600px高度： 350像素；} span { display : inline-block；绝对位置：宽度： 50px高度： 50px边框半径： 25px背景：rgba(0，0，0，3);font-size : 30px线高： 50px文本对齐：中心；光标：指针；颜色：白色；} span :悬停{背景： rgba(255，255，255，5);颜色：黑色；变换：比例(1.3)；} span # L { left : 10 xtop : 150 px } span # R { right : 10 xtop : 150 px } # div 1 # ul { position : absolute；bottom: 10pxleft: 250px宽度： 125像素；height: 20px} # div 1 # ul Li {列表式：无；向左浮动：高度： 20像素宽度： 20px边框半径： 10px背景技术：rgba(255，255，255，5);右边距： 5px光标：指针；}#div1 #ul .活动{background:rgba(0，0，0，5);}/style2.html

body div id=' div 1 ' img src=' http : ' alt=' span id=' L '/span span id=' R '/span ul id=' ul ' Li/Li Li/Li Li/Li/ul/div/body 3。射流研究…

脚本类型=' text/JavaScript '窗口。onload=function(){ var div 1=document。getelementbyid(' div 1 ')；var oImg=div 1。getelementsbytagname(' img ')[0]；var SPanL=文档。getelementbyid(' L ')；var SPan R=文档。getelementbyid(' R ')；var OUl=文档。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var arrImg=['img2/1.jpg '，' img2/2.jpg '，' img2/3.jpg '，' img2/4.jpg '，' img 2/5。jpg ']；var num=0；var oldLi=0；函数fn(num){ oimg。src=Arrimg[num]；} fn(0)；函数fnLi(num){ oLi[oldLi].类名=oLi[num].class name=' active old Li=num } fnLi(0)；/*点击左右跨度图片切换*//*点击左右跨度时里切换*/SPanL。onclick=function(){ if(num 1){ num=Arrimg。长度-1；fn(数字);fnLi(num)；} else { num-；fnLi(num)；fn(数字);} } SPan r . onclick=function(){ if(num==Arrimg。length-1){ num=0；fn(数字);fnLi(num)；} else { NumFunli(num)；fn(数字);} } /*点击里实现图片切换*/for(var I=0；i oLi.lengthi ) { oLi[i].索引=我；奥利[一].onclick=function(){ fn(this。索引)；fnLi(这个。索引)；} } }/脚本总结

以上所述是小编给大家介绍的射流研究…实现旗帜图片轮播效果（鼠标事件),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！