想给网页加个炫酷的图片轮播吗？自动加手动二合一的图片轮播图！这篇文章可以参考参考！简单几步，让网页顶部动起来，吸引眼球。快来看看怎么做到的吧！
效果展示
本站首页即见，或者点我查看效果吧！
具体操作
1.复制代码
傻瓜式操作，复制以下代码到你需要添加的地方即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.js"></script>
<style>
.swiper-container {
width: 600px;
height: 400px;
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="swiper-container"> <!-- 如果需要关闭手动控制滑动 把标签swiper-no-swiping添加进去-->
<div class="swiper-wrapper">
<!-- 这里放轮播的东西 图片文字都可以 -->
<div class="swiper-slide"><img src="images/01.png" alt=""></div>
<div class="swiper-slide"><img src="images/02.png" alt=""></div>
<div class="swiper-slide"><img src="images/03.png" alt=""></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
window.onload = function () {
var mySwiper = new Swiper('.swiper-container', {
// direction: 'horizonal',
loop: true,
autoplay: {
delay: 2000, // 轮播间隔时间
stopOnLastSlide: false,
disableOnInteraction: false,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable:true
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
</script>
</body>
</html>2.样式优化
如果你想要左右使用iconfont的效果，将以下css代码添加到前面的html代码中即可：
.swiper-button-prev,.swiper-button-next{
background: none;
}
.swiper-button-prev i,.swiper-button-next i{
font-size:40px;
color: aqua;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #6ce68a;
}也要记得把这个代码添加上哦，不然没有效果！
<div class="swiper-button-prev"><i class="iconfont icon-left"></i></div>
<div class="swiper-button-next"><i class="iconfont icon-zuoyoujiantou"></i></div>补充
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单横幅轮播效果 刘郎阁</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function function_name() {
imageAutoChange()
})
</script>
<script>
function imageAutoChange() {
/*获取图片和索引的数组对象*/
var $imgs = $("#main_div_img li");
var $nums = $("#main_div_num li");
var isStop = false;
var index = 0;
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
$imgs.eq(index).show();
/*鼠标悬停在数字上的事件处理*/
$nums.mouseover(function() {
isStop = true;
/*先把数字的背景改了*/
$(this).addClass("numsover").siblings().removeClass("numsover");
/*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作处理*/
index = $nums.index(this);
$imgs.eq(index).show("slow");
$imgs.eq(index).siblings().hide("slow");
}).mouseout(function() {
isStop = false
});
/*设置循环*/
setInterval(function() {
if(isStop) return;
if(index >= 6) index = -1;
index++;
$nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
$imgs.eq(index).show("slow").siblings().hide("slow");
}, 2000);
}
</script>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
}
</style>
<style>
#main_div{
width:100%;
height:600px;
position:absolute;
}
/*取消小圆点*/
#main_div li{
list-style:none;
}
#main_div_img {
margin:0;
padding: 0px;
}
#main_div_img li{
display:none;
margin:0;
padding: 0px;
}
/*角落显示数字的ul*/
#main_div_num{
overflow:hidden;
position:absolute;
bottom:10px;
right:10px;
color:#FFF;
}
/*数字的浮动*/
#main_div_num li{
border:#FFF solid 1px;
float:left;
margin:0px 5px;
padding:3px 10px;
}
.numsover{
background-color:#F08080;
color:#F00;
}
.numsout{}
</style>
</head>
<body >
<div id="main_div">
<ul id="main_div_img" >
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6047.gif" width="100%" height="600" /></li>
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6044.gif" width="100%" height="600" /></li>
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6046.gif" width="100%" height="600" /></li>
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6045.gif" width="100%" height="600" /></li>
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6044.gif" width="100%" height="600" /></li>
<li><img src="https://imgs.yjvc.cn/Typecho/2024_06/0601/IMG_6043.gif" width="100%" height="600" /></li>
</ul>
<ul id="main_div_num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>这是另一种轮播图😎
写在最后
总的一句，那就是复制粘贴复制粘贴。然后再根据你自己的主题或者根据你自己的需求，进行微调即可！
完！
这个样式不错，收藏了
我去拿来试试看
食用愉快😀
还得是你啊，刘大佬
见笑了😂
感谢大佬，我从你的博客已经学习了不少代码了👍
大佬谈不上，代码能用上就行😎