二、CSS样式创建了HTML结构后，接下来需要使用CSS对结构进行排版和设计。在这类情况下，有几个重要的CSS样式需要使用，包括容器控件的样式、图片的样式和控制按钮的样式。可以依照以下方式创建CSS样式：

CSS样式

/容器控件样式/.slideshow-container{max-width:1000px;position:relative;margin:auto;}/图片样式/.mySlides{display:none;max-height:500px;}.mySlidesimg{width:100%;}/控制按钮的样式/.prev,.next{cursor:pointer;position:absolute;top:50%;width:auto;margin-top:⑵2px;padding:16px;color:white;font-weight:bold;font-size:20px;transition:0.6sease;border-radius:03px3px0;user-select:none;}.next{right:0;border-radius:3px003px;}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8);}/控制圆点的样式/.dot{cursor:pointer;height:15px;width:15px;margin:02px;background-color:bbb;border-radius:50%;display:inline-block;transition:background-color0.6sease;}.active,.dot:hover{background-color:717171;}三、使用JavaScript一般来讲，在使用CSS创建轮播图时，一定要使用JavaScript或jQuery来激活箭头按钮和圆点按钮。JavaScript将控制哪一个幻灯片应当在显示，和从哪个幻灯片移动到下一个幻灯片。可以依照以下方式使用JavaScript来实现：

JavaScript

/初始化函数/varslideIndex=1;showSlides(slideIndex);/下一张和上一张函数/functionplusSlides(n){showSlides(slideIndex+=n);}/更改当前幻灯片函数/functioncurrentSlide(n){showSlides(slideIndex=n);}functionshowSlides(n){vari;varslides=document.getElementsByClassName(mySlides);vardots=document.getElementsByClassName(dot);if(n>slides.length){slideIndex=1}if(n<1){slideIndex=slides.length}for(i=0;i桂#哥#网#络www.gUIgege.cn