用js和jQuery做轮播图

时间:2023-03-08 17:31:19
用js和jQuery做轮播图

Javascript或jQuery做轮播图

用js和jQuery做轮播图

css样式

<style>
a{
text-decoration:none;
}
.naver{
width: 100%;
position:relative;
} .images{
position:relative;
width: 100%;
height: 400px;
}
.images img{
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
opacity: 0;
filter:alpha(opacity=0);
transition:opacity .5s;
}
/*图片切换之前有渐变的效果*/
.images img.current{
opacity:1;
filter:alpha(opacity=100);
}
.icon-list{
position:absolute;
left:43%;
bottom:30px;
z-index:1;
width: 200px;
border-radius:30px;
height:35px;
background-color:hsla(0,0%,100%,.4);
}
.icon-list span{
display:inline-block;
width: 20px;
height: 20px;
background-color:#fff;
border-radius:50%;
margin:8px 12px;
}
.icon-list span.current{
background:pink;
}
.icon a{
position:absolute;
top:50%;
display:block;
width: 40px;
height: 40px;
line-height:40px;
text-align:center;
color:rgba(255,255,255,.4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66ffffff,endcolorstr=#66ffffff);
background:rgba(0,0,0,.4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000,endcolorstr=#66000000);
font-size:36px;
font-weight:bold;
}
.icon a:hover{
color:rgba(255,255,255,.8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8ffffff,endcolorstr=#c8ffffff);
background:rgba(0,0,0,.8);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8000000,endcolorstr=#c8000000);
/*为了让IE兼容rgba*/
}
.icon a#prev{
left:10px;
}
.icon a#next{
right:10px;
}

HTML部分

<div class="naver clear">
<div class="images">
<img src="./images/01.jpg" class="current" >
<img src="./images/02.jpg" alt="" >
<img src="./images/03.jpg" alt="" >
<img src="./images/04.png" alt="" >
</div>
<div class="icon-list">
<span class="current" index="0"></span>
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<div class="icon">
<a href="#" id="prev">&lt;</a>
<a href="#" id="next">&gt;</a>
</div>
</div>

JavaScript设置

<script>
//获取响应的元素
var naver = document.querySelector(".naver");
var iconList = document.querySelectorAll(".icon-list span");
var prev = document.querySelector("#prev");
var next = document.querySelector("#next"); //定义循环变量
var m = 1; //定时函数
function runPlay(){
if (m > 3) {
m = 0;
} controlImage(m) m ++;
} var timer = setInterval(runPlay, 3000); //滑过轮播图,定时停止
naver.onmouseover = function(){
clearInterval(timer); //显示按钮
prev.style.display = "block";
next.style.display = "block";
} naver.onmouseout = function(){
timer = setInterval(runPlay, 3000); //隐藏按钮
prev.style.display = "none";
next.style.display = "none";
} //被每一个 控制按钮绑定 鼠标滑过 事件
for (var i = 0; i < iconList.length; i ++) {
iconList[i].onmouseover = function(){
var index = parseInt(this.getAttribute("index"));
controlImage(index); m = index + 1; }
} //点击向右的按钮
next.onclick = function(){
if (m > 3) {
m = 0;
} controlImage(m);
m ++;
} //点击向左的按钮
prev.onclick = function(){
m -= 2;
if (m < 0) {
m = 3;
}
controlImage(m);
m ++;
} //控制图片的变化
function controlImage(n){
//获取所有a的集合
var aImgs = document.querySelectorAll(".images img"); //所有的a删除类, 第n个添加类
for (var i = 0; i < aImgs.length; i ++) {
aImgs[i].className = "";
iconList[i].className = "";
}
aImgs[n].className = "current";
iconList[n].className = "current"; }
</script>

jQuery部分

<!-- 兼容IE8以上的 -->
<!--[if gt IE 8]><!-->
<script src="./js/jquery-3.2.1.min.js"></script>
<!--<![endif]--> <!-- 兼容包括IE8以下的浏览器 -->
<!--[if lte IE 8]>
<script src="./js/jquery-1.12.4.min.js"></script>
<![endif]--> <script>
// 设置轮播图样式
$(function(){
//定义循环变量
var m=1;
//定时函数
function runPlay(){
if(m > 3){
m=0;
}
controlImage(m);
m++;
}
var timer=setInterval(runPlay,3000);
//滑过轮播图,定时停止,离开定时继续
$(".naver").mouseenter(function(){
clearInterval(timer);
//显示按钮
prev.style.display="block";
next.style.display="block";
}).mouseleave(function(){
timer=setInterval(runPlay,3000);
//隐藏按钮
prev.style.display="none";
next.style.display="none";
}) //点击向下的按钮
$("#next").click(function(){
if(m > 3){
m=0;
}
controlImage(m);
m++;
}) //点击向上的按钮
$("#prev").click(function(){
m-=2;
if(m < 0){
m=3;
}
controlImage(m);
m++;
}) $(".icon-list span").mouseenter(function(){
controlImage($(this).index());
m = $(this).index() + 1;
}) //控制图片的变化
function controlImage(n){
$(".images img").removeClass("current").eq(n).addClass("current");
$(".icon-list span").removeClass("current").eq(n).addClass("current");
}
}) </script>