⽹页简易轮播图代码
CSS的设计
ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "微软雅⿊"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #33 .arrowLeft,.arrowRight{
position: absolute;
width: 30px;
background:rgba(0,0,0,0.2);
height: 50px;
line-height: 50px;
text-align: center;
top:200px;
z-index: 150;
font-family: "微软雅⿊";
font-size: 28px;
font-weight: bold;
cursor: pointer;
display: none;
}
.arrowLeft{left: 10px;}
.
arrowRight{right: 10px;}
li:nth-of-type(1){
background: orange;
}
(须⾃建⼀个image⽂件夹存储所需要的图⽚并且导⼊，导⼊时注意路径)
HTML以及JQ部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> ⼴告图⽚轮播切换</title>
<link rel="stylesheet" href="css/style.css">
//导⼊JQ
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//⿏标移⾄左右两边时显⽰左右箭头
$(".adver").mouseover(function(){
$(".arrowRight").css("display","block")
$(".arrowLeft").show();
}).mouseout(function(){
//⿏标移出时进⾏隐藏
$(".arrowRight").hide();
$("arrowLeft").hide()
})
//创建数组，存⼊集合
var img=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
//定义数组下标
var index=0;
//单击左箭头事件
$(".arrowLeft").click(function(){
//判断图⽚是否为第⼀张
if(index==0){
if(index==0){
alert("这是第⼀张照⽚")
}else{
//下标位置
index--;
var i=index+1;//图⽚位置
//获取数组中的图⽚index为下标
$(".adver").css("background","url(images/"+img[index]+")")
//寻同辈元素并且改变颜⾊
$("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
}
})
//单击右箭头事件
$(".arrowRight").click(function lxb(){
//判断是否是最后⼀张
if(index==img.length-1){
alert("这是最后⼀张照⽚")
}else{
//下标位置增加(右移)
index++;
var i=index+1;//图⽚位置
//获取数组中的图⽚index为下标
$(".adver").css("background","url(images/"+img[index]+")")
//寻同辈元素并且改变颜⾊
$("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
}
})
//定义定时器⽤来滚动图⽚
function a(){
if(index==img.length-1){
alert("这是最后⼀张照⽚")
}else{
index++;//
var i=index+1;//图⽚位置
//获取数组中的图⽚index为下标
$(".adver").css("background","url(images/"+img[index]+")")
//寻同辈元素并且改变颜⾊
$("li:nth-of-type("+i+")").css("background","red").siblings().css("background","gray")
}
}
//每5s更换⼀次图⽚
setInterval(a,5000)
//⿏标悬浮的换图事件
$("ul li").mouseover(function(){
index=parseInt($(this).attr("value"));
//获取数组中的图⽚index为下标
$(".adver").css("background","url(images/"+img[index]+")")
//寻同辈元素并且改变颜⾊
$("li:nth-of-type("+(index+1)+")").css("background","red").siblings().css("background","gray")            })
})
</script>
</head>s
<body onload="a">
<div class="adver">
<ul>
<li value="0">1</li>
<li value="1">2</li>
<li value="2">3</li>
<li value="3">4</li>
<li value="4">5</li>
<li value="5">6</li>js简易轮播图代码
</ul>
<div class="arrowLeft"><</div><div class="arrowRight">></div>
<div class="arrowLeft"><</div><div class="arrowRight">></div> </div>
</body>
</html>
JQ⽂件使⽤的是jquery-1.12.4.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。