Bootstrap框架实现广告轮播效果

我以前写过一个纯js版本的广告转盘。与前一个相比，这个使用了Bootstrap框架，代码相对简单美观。效果如下：其中一张图片，

这是两张照片。可以看到上面有小点，就像平时看到的一些网站一样。点击圆点切换图片。按照指定的顺序，上面有箭头。单击左右箭头向左和向右移动。这是一般功能。

接下来，代码：HTML代码：

！-广告转盘-div id=' ad-carousel ' class=' carousel slide ' data-ride=' carousel ' ol class=' carousel-indicators ' id=' Dian ' lidata-target=' # ad-carousel ' data-slide-to=' 0 ' class=' active '/Li/ol div class=' carousel-inner ' id=' change ' div class=' item active ' A href=' # ' img src=' http : # ' id=' one '/A/div/div A class=' left carousel-carousel在这段代码中，首先，引导。引入了carousel类，在bootstrap中定义，每个li相当于上面的点。必须有数据属性，否则不会实现切换。bootstrap中的每个数据属性都与js代码相关，因此数据属性不能省略。

Js代码：

函数createImg(){ var images=[' images/1 . jpg '，' images/2.jpg '，' images/3.jpg '，' images/4.jpg '，' images/5 . jpg ']；var oltag=document . getelementbyid(' Dian ')；var div tag=document . getelementbyid(' change ')；for(var I=0；一.图像.长度；I){ if(I==0){ document . getelementbyid(' one ')。src=images[I]；} else { var Li=document . create element(' Li ')；li.setAttribute('data-target '，' # ad-carousel ')；li.setAttribute('data-slide-to '，' '(I ^ 1))；oltag . appendchild(Li)；var div=document . create element(' div ')；div.className=' itemvar a=document . create element(' a ')；var img=document . create element(' img ')；img . src=images[I]；a . appendchild(img)；div . appendchild(a)；div tag . appendchild(div)；}} }Js代码主要是创建img和li，并在其中放入图片，添加图片的小点。只需将相应的类添加到每个标签中。

总结：上面代码中的左右箭头使用了bootstrap的图形库，使用起来也非常方便。有了bootstrap，我们可以自己保存很多代码，效果很漂亮，但是不能太依赖，还是要自己写代码。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。