实现原理:
将图片在一行中平铺,然后计算偏移量再用定时器实现定时轮播。
思路如下:
1.首先创建一个div1,限定其宽度和高度,并使用overflow:hidden,且设置position为relative;
2.再创建一个装载图片的div2,宽度为div中所有图片的宽度,其中内容用"float:left"使其图片水平浮动,此时图片在一行中,且设置position为absolute;
3.添加两个按钮,改变div2的水平位置,点击按钮实现手动轮播;
4.添加一个定时器,使其朝一个方向自动轮播,并设置当用户鼠标放到图片时停止轮播,滑出时再定时播放。
5.设置底部小圆点,使用户清楚图片所处位置,并实现点击小圆点可切换至相应图片。
具体实现如下:
一、HTML布局网页结构
<div class="css_box" id="js_box">
<div class="slider_main" id="slider_main_block" style="left:0">
<div class="slider_main_img"><a href="#"><img src="./images/img1.webp" alt="#"></a></div>
<div class="slider_main_img"><a href="#"><img src="./images/img2.webp" alt="#"></a></div>
<div class="slider_main_img"><a href="#"><img src="./images/img3.webp" alt="#"></a></div>
<div class="slider_main_img"><a href="#"><img src="./images/img4.webp" alt="#"></a></div>
<div class="slider_main_img"><a href="#"><img src="./images/img5.webp" alt="#"></a></div>
</div>
<div class="slider_ctrl" id="slider_ctrl">
<span class="slider_ctrl_prev"><</span>
<span class="slider_ctrl_next">></span>
</div>
</div>
二、CSS网页样式布局
*{
margin: 0;
padding: 0;
}
.css_box{ /*显示图片的容器div,限定大小,超出部分overflow*/
position: relative;
margin: 100px auto;
width: 900px;;
height: 467px;
overflow: hidden;
}
.slider_main{ /*装载图片的div*/
position: absolute;
width: 4500px;
height: 467px;
}
.slider_main img{
float: left;
width: 900px;
height: 467px;
}
.slider_ctrl{
width: 100%;
height: 80px;
color: white;
text-align: center;
position: absolute;
top:210px;
font-size: 30px;
font-weight: 100;
line-height: 80px;
display: none;
}
.slider_ctrl_prev{
display: block;
width: 50px;
height: 80px;
background: rgba(0, 0, 0, 0.5);
float: left;
cursor: pointer;
}
.slider_ctrl_next{
display: block;
width: 50px;
height: 80px;
background: rgba(0, 0, 0, 0.5);
float: right;
cursor: pointer;
}
.css_box:hover .slider_ctrl{
display: block;
}
.slider_ctrl_con{
position: absolute;
bottom: 5%;
left: 45%;
}
.slider_ctrl_con li{ /*底部小圆点*/
list-style: none;
width: 12px;
height: 12px;
background: white;
float: left;
margin-left: 10px;
border-radius: 100%;
cursor: pointer;
}
.slider_ctrl_con .current_pot{
background: red;
}
三、JS代码实现
1.DOM操作获取需要的元素
/*1.DOM操作获取元素*/
var js_box = document.getElementById("js_box"); /*显示图片的盒子*/
var slider_main_block = document.getElementById("slider_main_block"); /*装有图片的盒子*/
var imgs = slider_main_block.children; /*获取图片的元素*/
var slider_ctrl = document.getElementById("slider_ctrl"); /*获取控制按钮的元素*/
2.根据图片的数量动态添加底部小圆点元素
/*2.根据图片的数量动态添加底部小圆点元素*/
var div = document.createElement("div");
div.className = "slider_ctrl_con";
var ul = document.createElement("ul");
for(var i = 0; i < imgs.length; i++)
{
var li = document.createElement("li");
if ( i == 0){
li.className = "current_pot"; /*设置第一个li的类名为current_pot,表示当前图片所在位置*/
}
ul.insertBefore(li,ul.children[1]);
}
div.appendChild(ul);
js_box.appendChild(div);
3.设置当前底部小圆点的样式
/*3.设置当前底部小圆点的样式*/
var index = 0;
var dots = document.getElementsByTagName("li");
function showCurrentDot() {
for(var i = 0; i < dots.length; i++) {
dots[i].className="";
}
dots[index].className = "current_pot";
}
4.设置手动播放,单击两边控制按钮实现图片切换效果;
/*4.设置手动播放,单击两边控制按钮实现图片切换效果*/
function fnNext_img() {
var nextLocation; /*下一张图片的位置*/
if(slider_main_block.style.left == "-3600px") {
nextLocation = 0;
}else{
nextLocation = parseInt(slider_main_block.style.left) - 900;
}
slider_main_block.style.left = nextLocation + "px";
index++;
if(index > 4) {
index = 0;
}
showCurrentDot();
}
function fnPrev_img() {
var prevLocation; /*上一张图片的位置*/
if(slider_main_block.style.left == "0px") {
nextLocation = -3600;
}else{
nextLocation = parseInt(slider_main_block.style.left) + 900;
}
slider_main_block.style.left = nextLocation + "px";
index--;
if(index < 0) {
index = 4;
}
showCurrentDot();
}
slider_ctrl.children[0].onclick = function(){
fnPrev_img();
}
slider_ctrl.children[1].onclick = function(){
fnNext_img();
}
5.设定一个计时器,然后创建一个可以自动播放的函数autoPlay(),最后调用这个函数即可实现自动播放,并实现鼠标放上时停止播放,移开又继续播放。
/*5.设置自动播放图片autoPlay()*/
var timer = null;
function autoPlay(){
timer = setInterval( function () {
fnNext_img();
},2000);
}
autoPlay(); /*自动播放图片*/
/*鼠标掠过时停止播放*/
js_box.onmouseenter = function(){
clearInterval(timer);
}
/*鼠标移开继续播放*/
js_box.onmouseleave = function(){
autoPlay();
}
6.点击小圆点时,转到相应的图片。
/*6.点击小圆点时,转到相应的图片*/
for(var i = 0; i < dots.length; i++) {
(function(i){
dots[i].onclick = function(){
var dis = index - i;
var location = parseInt(slider_main_block.style.left) + dis*900;
slider_main_block.style.left = location + "px";
index = i;
showCurrentDot();
}
})(i);
}
最终效果如下:
参考文章:https://www.cnblogs.com/zhuzhenwei918/p/6416880.html?utm_source=tuicool&utm_medium=referral