今天是我第一天在CSDN上写东西,之前写网站一直用的都是轮播插件,没有自己写过,今天参考了一下网上的别人的思路,自己写了这个。写的不是很好,多多包涵,只是为了让自己能够有所进步。谢谢大家
HTML
<div class="banner">
<ul class="bannerimg">
<li><img src="banner1.jpg" alt=""></li>
<li><img src="banner2.jpg" alt=""></li>
<li><img src="banner3.jpg" alt=""></li>
<li><img src="banner4.jpg" alt=""></li>
</ul>
<ul class="slide_point">
</ul>
<button class="left" href="javascript:void(0)"><<</button>
<button class="right" href="javascript:void(0)">>></button>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.banner {
width: 100%;
height: 250px;
position: relative;
}
.banner ul:nth-child(1) {
width: 200000px;
position: relative;
overflow: hidden;;
}
.banner ul:nth-child(1) li {
width: 1920px;
float: left;
overflow: hidden;
}
.banner ul:nth-child(1) li img {
width: 100%;
height: 250px;
}
.slide_point {
width: 200px;
margin: 0 auto;
overflow: hidden;;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.slide_point li {
width: 10px;
height: 10px;
background: #888;
opacity: .6;
float: left;
display: block;
border-radius: 50%;
margin-left: 5px;
}
li.active {
background: white;
opacity: 1;
}
.banner > button {
width: 40px;
height: 40px;
border-radius: 50%;
background: #666;
color: white;
text-decoration: none;
line-height: 40px;
text-align: center;
border: none;
}
.banner > button:focus {
outline: -webkit-focus-ring-color auto 0px;
}
.banner button.left {
display: block;
position: absolute;
left: 10px;
bottom: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.banner button.right {
display: block;
position: absolute;
right: 10px;
bottom: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
JS
$(document).ready(function () {
/*动态增加原点开始*/
var img = $(".bannerimg li");//获取到轮播图的个数
$.each(img, function () {
$(".slide_point").append('<li></li>');//遍历轮播图的个数,动态增加轮播原点个数
});
$(".slide_point li").first().addClass("active");//给第一个增加选中样式类
/*动态增加原点结束*/
/*通过原点控制轮播开始*/
$(".slide_point li").click(function () {
$(".slide_point li").removeClass("active");//先把所有的原点选中样式清除
var num = $(this).index();//获取点击的是哪个原点
var movePx = num * -1920 + "px";//设置移动的宽度
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);//通过animate设置marginleft;
$(this).addClass("active");//给刚才点击的li原点增加选中样式类
})
/*通过原点控制轮播结束*/
/* 点击切换开始*/
$(".left").click(function () {
$(".left").attr("disabled", true);//将按钮设置为不可用,避免点击过多形成动画迟缓。
var num = $(".slide_point li.active").index();//获取到当前选中的是哪一个原点对应的图片
if (num == 0) {
num = $(".slide_point li").last().index();//如果是第一张图片还往左边走,num就是最后一个原点位置的索引值,去到最后一张
var movePx = (num) * -1920 + "px";
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
$(".slide_point li").removeClass("active");
$(".slide_point li").eq(num).addClass("active");
setTimeout("$('.left').attr('disabled', false);", 500);//动画结束后将按钮设置为可用
} else {
var movePx = (num - 1) * -1920 + "px";//往左滑动 所以num-1
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
$(".slide_point li").removeClass("active");
$(".slide_point li").eq(num - 1).addClass("active");
setTimeout("$('.left').attr('disabled', false);", 500);
}
})
/* 点击切换结束*/
//切换右边与切换左边同理
$(".right").click(function () {
$(".right").attr("disabled", true);
var num = $(".slide_point li.active").index();
var length = $(".slide_point li").length;
if (num == length - 1) {
$(this).attr("disabled", true)
num = 0;
var movePx = (num) * -1920 + "px";
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
$(".slide_point li").removeClass("active");
$(".slide_point li").eq(num).addClass("active");
setTimeout("$('.right').attr('disabled', false);", 500);
} else {
var movePx = (num + 1) * -1920 + "px";
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
$(".slide_point li").removeClass("active");
$(".slide_point li").eq(num + 1).addClass("active");
setTimeout("$('.right').attr('disabled', false);", 500);
}
})
function changeTab() {
var length = $(".slide_point li").length;//获取原点元素的长度
var num = $(".slide_point li.active").index();//获取当前选中的图片的索引值
if (num < length-1) {
num++;//如果还没有到最后一张,则切换到下一张
} else {
num = 0;//如果到了最后一张,则切换到第一张
}
var movePx = num * -1920 + "px";
$(".banner ul.bannerimg").animate({"marginLeft": movePx}, 500);
$("ul.slide_point li").eq(num).addClass("active").siblings().removeClass("active");
}
//轮播定时器,3秒执行一次
var timer = setInterval(changeTab, 3000);
})
jQ引用的是百度的,是
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
图片就不放出来了,我网上随便找的图片测试的。