网站首页轮播图效果
发布时间
阅读量：
阅读量
body部分
<body>
<div class="box">
<ul class="img"> <!--一共七张图片-->
<li style="display: block"><img src="images/ban01.jpg" height="460" width="1226"/></li><!--设置第一张可见-->
<li><img src="images/ban02.jpg" height="460" width="1226"/></li>
<li><img src="images/ban03.jpg" height="460" width="1226"/></li>
<li><img src="images/ban04.jpg" height="460" width="1226"/></li>
<li><img src="images/ban05.jpg" height="460" width="1226"/></li>
<li><img src="images/ban06.jpg" height="460" width="1226"/></li>
<li><img src="images/ban07.jpg" height="460" width="1226"/></li>
</ul>
<!--左右两边按钮，这里使用的是图片-->
<a class="left"></a>
<a class="right"></a>
<!--右下角的小点点，一共七张图，七个点-->
<div class="focus">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
AI写代码CSS部分
<style>
.box{
width: 1226px; /*宽高与图片宽高相同*/
height: 460px;
margin: 50px auto; /*上外边距50px 水平自动居中*/
position: relative; /*设置为先对定位，作为图片按钮小点的参考物*/
}
.img li{
list-style: none; /*去掉li标签前面的点*/
display:none; /*默认不可见*/
}
img{
position: absolute; /*图片设为绝对定位，方便以外面的div为参考*/
top:0;
left: 0;
}
.box .left{
width: 41.5px;
height: 69px;
position: absolute;
background-image: url("images/icon-slides.png"); /*按钮背景用一张图片*/
top: 195.5px;
left: 40px;
background-position: -83px 0; /*固定图片的位置*/
}
.box .right{
width: 41.5px;
height: 69px;
position: absolute;
background-image: url("images/icon-slides.png");
top:195.5px;
right: 40px;
background-position: -124.5px 0;
}
.left:hover{
background-position: 0 0; /*以最开始的位置为参考 左、上移为负，右、下移为正*/
}
.right:hover{
background-position:-41.5px 0;
}
.focus{
position: absolute;
width: 175px;
height: 15px;
right: 100px;
bottom: 50px;
}
.focus span{
float: left;
display: block;
width: 15px;
height: 15px;
border-radius: 50%; /*将方块设为圆形*/
background-color: white;
margin-right: 10px;
}
.focus .content{
background-color: orangered;
}
</style>
AI写代码jQuery部分
<script src="js/jquery-3.4.0.js"></script>
<script>
$(function () {
//图片切换函数
function changeImg(num) {
//eq(num) 根据num获取元素集合中下标为num的jQuery元素对象 让其淡入 ，除了它之外的元素淡出
$(".img li").eq(num).fadeIn().siblings().fadeOut();
//让被选的对象右下角对应的点出现样式，其他去掉此样式
$(".focus span").eq(num).addClass("content").siblings().removeClass("content");
}
var num = 0;
var timer; //定义定时器
//自动播放函数
function autoPlay() {
timer = setInterval(function () { //设置定时器自动播放
num++;
num = (num==7?0:num);
changeImg(num);
}, 2000)
}
autoPlay();
//鼠标移到图片上时停止轮播
$(".box").mousemove(function () {
clearInterval(timer);
}).mouseout(function () {
autoPlay(); //移走时继续轮播
});
//点击左边按钮，图片向左边切换
$(".left").click(function () {
num--;
num = (num == -1?6:num);
changeImg(num);
})
//点击右边按钮，图片向右边切换
$(".right").click(function () {
num++;
num = (num == 7?0:num);
changeImg(num);
})
//点焦点，图片切换
$(".focus span").click(function () {
num = $(this).index();
changeImg(num);
})
})
</script>
AI写代码全部评论 (0)
还没有任何评论哟~