版权声明:未经允许不允许转载哦 https://blog.csdn.net/qq_38687915/article/details/78707680
初学者-菜鸟级别。直接上代码吧
①:HTML部分 第一张图片和最后一张图片是一样的,这样做是为了实现从最后一张过渡到第一张,图片直接拿的是京东的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="lunbo.css">
</head>
<body>
<div class="box">
<div class="img_list">
<img class="img1" src="https://img13.360buyimg.com/da/jfs/t7606/15/4771093855/132890/5f055c11/5a0a49d8Nac7232c3.jpg" alt="">
<img src="https://img14.360buyimg.com/da/jfs/t12241/114/347670663/76562/336432ea/5a096d57N09c765dc.jpg" alt="">
<img src="https://img1.360buyimg.com/da/jfs/t11551/142/1785340879/196158/2354e0e0/5a094447N9ee98d86.jpg" alt="">
<img src="https://img12.360buyimg.com/babel/jfs/t11884/62/1800646604/180354/fcc5f2d8/5a0a54aaN1e85ddbd.jpg" alt="">
<img src="https://img20.360buyimg.com/da/jfs/t10597/214/1767280119/107853/e81bef25/59e5deffN82945fbf.jpg" alt="">
<img src="https://img14.360buyimg.com/babel/jfs/t14050/118/403274213/59009/e82f37fa/5a0aba40N80e8267d.jpg" alt="">
<img src="https://img10.360buyimg.com/babel/jfs/t7810/31/4276487469/125325/ce0e200e/5a03f5f9Nfeb6d594.jpg" alt="">
<img src="https://img11.360buyimg.com/babel/jfs/t11983/140/1554125186/109877/17e077ad/5a05586fNc30b76da.jpg" alt="">
<img class="img1" src="https://img13.360buyimg.com/da/jfs/t7606/15/4771093855/132890/5f055c11/5a0a49d8Nac7232c3.jpg" alt="">
</div>
<div id="point" class="poi">
<span class="sp_poi on"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
<span class="sp_poi"></span>
</div>
<span id="pre" class="arrow" ><</span>
<span id="nex" class="arrow">></span>
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="lunbo-jq.js"></script>
</html>
②:css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
padding: 20px;
}
/*最外围父级元素的样式*/
.box{
position: relative;
width: 790px;
height: 340px;
margin: 0 auto;
overflow: hidden;
}
/*图片父级的样式*/
.img_list{
position: absolute;
z-index: 1;
width: 6320px;
height: 340px;
}
/*图片样式*/
.img_list img{
float: left;
width: 790px;
height: 340px;
}
/*箭头的样式*/
.arrow{
width: 40px;
height: 60px;
font-size: 30px;
line-height: 60px;
text-align: center;
color: #ffffff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
display: none;
position: absolute;
z-index: 2;
top:160px;
}
#nex{
right: 0px;
}
/*鼠标悬浮在父空间上时,显示两边的箭头*/
.box:hover .arrow{
display: block;
}
/*鼠标移到箭头上,改变背景色 也可以通过js*/
.arrow:hover{
background-color: RGBA(0, 0, 0,7);
}
/*小圆点外围父级元素样式*/
.poi{
height: 10px;
width: 180px;
position: absolute;
z-index: 2;
left: 330px;
bottom: 30px;
}
/*小圆点样式*/
span{
margin-right: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
background-color: #ffffff;
}
/*单纯的 默认第一个小圆点的颜色*/
.on{
background-color: #00c37e;
}
③jq
var num = 0;
$(function () {
//右侧按钮 点击
$('#nex').click(function () {
if(num<8)
num++;
if(num>=8){
$('.img_list').css('margin-left','0px');
num=0;
}
// console.log(num);
if(num==8){
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(0).css('backgroundColor','#00c37e');
}else{
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(num).css('backgroundColor','#00c37e');
}
$('.img_list').stop().animate({'margin-left':-790*num+"px"},500);
});
//左侧按钮 点击
$('#pre').click(function () {
if (num>=0)
num--;
if(num<0){
num=7;
$('.img_list').css('margin-left','-5530px');
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(7).css('backgroundColor','#00c37e');
}else {
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(num).css('backgroundColor','#00c37e');
}
console.log(num);
$('.img_list').stop().animate({'margin-left':-790*num+"px"},100);
});
//鼠标悬浮在整个图片区域时 停止轮播, 离开后 继续轮播
$('.box').hover(function () {
clearInterval(m_auto);
//鼠标在小圆点上滑过,显示对应位置的图片
$('.sp_poi').on('mouseenter',function () {
num = $(this).index();
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(num).css('backgroundColor','#00c37e');
$('.img_list').animate({'margin-left':-790*num+"px"},100);
})
},function () {
m_auto = setInterval(auto,2000);
})
//自动轮播
var m_auto = setInterval(auto,2000);
});
function auto() {
if(num<8)
num++;
if(num>=8){
num=0;
$('.img_list').css('margin-left','0px');
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(0).css('backgroundColor','#00c37e');
}else {
$('.sp_poi').css('backgroundColor','#ffffff');
$('.sp_poi').eq(num).css('backgroundColor','#00c37e');
}
$('.img_list').animate({'margin-left':-790*num+"px"});
}
作为一位初学者,也是第一次尝试去写博客,有问题的可以帮忙指出来我去修改。还有就是大神们怎么将效果图放上来,指点一下咯。
这篇文章写的详细,有图有代码有解说思路-------http://blog.csdn.net/m0_37460263/article/details/76019842