开发工具与关键技术：Adobe Dreamweaver CC 2017 图片的自动播放 定时器
高亮效果 bootstrap-4的使用
作者：孙水兵
撰写时间：2019年1月16
第一种:使用js
主要思路：先将需要轮播的几张图通过浮动使其并排显示在在luobo这个盒子中，然后再用一个显示图片的盒子imgbox（imgbox的宽度是所有图片宽度的总和），然后设置超出部分隐藏（overflow:hidden），然后调用screen1lunbo(offset)函数方法，改变图片的显示。（除此之外，另外设置了一些按钮并通过定位使其显示在自己想要的地方，设置按钮高亮效果，与图片绑定，通过函数setliBtn（）切换高亮效果）
HTML部分
图片应比需要的图片多放两张，即第一张图片放需要图片的最后一张，最后一张为需要图片的第一张在图片的父元素设置一个行内元素：其style=”left:-图片的宽度+“px””。另外，在按钮部分也给对应图片的按钮一个高亮效果，用类on来写其样式，再给所有li标签自定义一个行内元素ind（可以自己随便去名），其用途是在JS中记录当前是第几张图片
<div class="showbox">
<div class="lunbo" id="showbox">
<div class="imgbox" style="left: -979px;" id="imgbox">
<img src="image/5.jpg" alt="">
<img src="image/1.jpg" alt="">
<img src="image/2.jpg" alt="">
<img src="image/3.jpg" alt="">
<img src="image/4.jpg" alt="">
<img src="image/5.jpg" alt="">
<img src="image/1.jpg" alt="">
</div>
</div>
<!------按钮部分--------->
<div class="liti">
<img src="image/blue12.png" alt="">
<ul id="libtn" class="xyd mt-2">
<li class="on" ind="1"></li>
<li ind="2"></li>
<li ind="3"></li>
<li ind="4"></li>
<li ind="5"></li>
</ul>
</div>
</div>
CSS部分
先给lunbo设置一个固定的宽度、高度，还有边框，设置超出部分隐藏（overflow：hidden；）。再给图片设置一个一个固定的宽度、高度（减去边框的宽度），再给图片的父元素设置宽度（所有图片的宽度之和），高度（和图片一样），设置浮动，使所有图片并列，再写小圆点的样式，使其到自己想要的地方，给on写样式（改变背景颜色）
.lunbo{
width: 999px;
height: 470px;
border: 10px solid #fff;
overflow:hidden;
position: relative;
}.lunbo .imgbox img{
width: 979px;
height: 450px;
}.imgbox{
width: 4895px;
height: 450px;
position: absolute;
display: flex;
}
.showbox{
position: relative;
}
.xyd li{
width: 15px;
height: 15px;
background: #414b64;
border-radius: 50%;
float: left;
margin-left: 5px;
list-style: none;
}.xyd{
position: absolute;
bottom: 5px;
left: 47%;
}
.xyd .on{
background: #55aad4;
}
Js部分
写出自动播放函数，在Windows.onload事件中调用，调用标移入停止事件，鼠标移出自动播放事件。置定时器，用函数go()判断，调用函数go()。
推荐更详细解释（https://blog.csdn.net/diligentkong/article/details/55209861 ）
// JavaScript Document
var ind = 1;
var transfor = false;
var autoPlayTime;
window.onload = function(){
//自动播放
autoPlay();
var showbox = document.getElementById("showbox");
showbox.onmouseover = stop;
showbox.onmouseout = autoPlay;
function screen1lunbo(offset){
transfor = true;
var imgbox = document.getElementById("imgbox");
//运动总时间
var time = 300;
//运动间隔时间
var interval = 10;
//每一次位移量=总位移量/运动次数
var speed = offset/(time/interval);
//目标值
var newleft = parseInt(imgbox.style.left)+offset;
//递归
function go(){
if((speed>0&&( parseInt( imgbox.style.left)<newleft))||speed<0&& (parseInt( imgbox.style.left)>newleft)){
imgbox.style.left = parseInt( imgbox.style.left)+speed+"px";
setTimeout(go,interval);
}
else{
if(newleft<-4995){
imgbox.style.left= -979+"px";
}
else{
imgbox.style.left= newleft+"px";
}
transfor=false;
}
}
go();
}
//自动播放
function autoPlay(){
autoPlayTime = setInterval(function(){
if(transfor){
return;
}
if(ind===5){
ind=1;
}
else{
ind++;
}
screen1lunbo(-979);
setliBtn();
},2000);
}
//停止播放
function stop(){
clearInterval(autoPlayTime);
}
};
按钮高亮效果部分
- 与高亮效果和轮播绑定
先用id（libtn）及其下面的li标签声明变量libtn，用for循环判断按钮，在for循环中給变量libtn添加鼠标移入事件，用变量myind获取当前按钮的ind的值，在写高亮效果和轮播的函数名（函数名无论大小写都要完全一致） - 按钮高亮效果部分
先用id（libtn）及其下面的li标签声明变量libtn，，用for循环判断按钮中是否有on这个类，如果有，取消，跳出循环，再给鼠标移入的按钮增加一个高亮效果
var libtn = document.getElementById("libtn").getElementsByTagName("li");
for(var m=0;m<libtn.length;m++){
libtn[m].onmouseover = function(){
if (transfor){
return;
}
var myind = parseInt(this.getAttribute("ind"));
var offset = -979*(myind-ind);
ind = myind;
screen1lunbo(offset);
setliBtn();
};
}
//按钮高亮效果
function setliBtn(){
var liBtn = document.getElementById("libtn").getElementsByTagName("li");
for(var i=0;i<liBtn.length;i++){
if(liBtn[i].className === "on"){
liBtn[i].className = "";
break;
}
}
liBtn[ind-1].className = "on";
}
效果如下
第二种：使用插件bootstrap 4.
bootstrap 4.（下载网址：中文网址： http://code.z01.com/v4/ 英文网址：https://getbootstrap.com/ ）
第一步：找到插件bootstrap-4的轮播部分，到案例中按F12检查代码，选中轮播部分，复制代码
第二步：更换自己需要的图片，修改样式
可以把不需要的部分去掉，ol 下的li标签可以增加，将data-slide-to=””每次加1即可
HTML部分
<!-------轮播--------->
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1" class=""></li>
<li data-target="#carouselIndicators" data-slide-to="2" class=""></li>
<li data-target="#carouselIndicators" data-slide-to="3" class=""></li>
<li data-target="#carouselIndicators" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="image/1.jpg" alt="First slide">
</div>
<div class="carousel-item ">
<img class="d-block w-100" src="image/2.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/3.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/4.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="image/5.jpg" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS部分：图片的样式以及按钮和两个箭头的样式同样可以根据自己想要的样式进行修改，不过个人建议通过最外层父元素逐级递减查下去
/*= 轮播 =================*/
.carousel .carousel-item img{
height: 550px;
}
.carousel{
position: relative;
}
.carousel .carousel-indicators {
position: absolute;
bottom: 66px;
left: 58%;
}
.carousel .carousel-indicators li{
width: 12px;
height: 12px;
background: rgba(0,0,0,0);
border: 1px solid #fff;
border-radius: 50%;
}
.carousel .carousel-indicators .active{
background: #fff;
}
.carousel .carousel-control-prev,.carousel .carousel-control-next{
width:60px;
height: 60px;
background: rgba(0,0,0,0.3);
border-radius: 50%;
}
.carousel .carousel-control-prev{
position: absolute;
top: 38%;
left: 29%;
}
.carousel .carousel-control-next{
position: absolute;
top: 40%;
right: 18%;
}
效果如下
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
