实现效果
1.视图结构
<div class="jsjy_LL" id="picList" style="position:relative;left: 50%;margin-left: -175px;width: 350px;height: 200px;overflow: hidden;">
<!--图片区-->
<div style="width: 1050px;height: 200px;" id="container">
<div style="float: left">
<a href="#" target="_blank"></a><img src="../imge/0.jpg" class="ysjyy_img" width="350" height="200">
<p class="jsjy_LL_title">我是数字0我是第一个</p>
</div>
<div style="float: left">
<a href="#" target="_blank"></a><img src="../imge/1.jpg" class="ysjyy_img" width="350" height="200">
<p class="jsjy_LL_title">我是数字1我是第二个</p>
</div>
<div style="float: left">
<a href="#" target="_blank"></a><img src="../imge/2.jpg" class="ysjyy_img" width="350" height="200">
<p class="jsjy_LL_title">我是数字2我是第三个</p>
</div>
</div>
<!--导航栏-->
<ul style="position: absolute; left: 80px;top: 160px; width: 195px; height: 40px;" id="itemList">
<li class="active">
<a href="##">1</a>
</li>
<li>
<a href="##">2</a>
</li>
<li>
<a href="##">3</a>
</li>
</ul>
</div>
提醒,图片路径要换为你自己的图片
接下来是css
<style>
*{
margin: 0;
padding: 0;
}
ul li{
float: left;
list-style: none;
width: 60px;
height: 30px;
background: black;
margin-left: 5px;
text-align: center;
}
ul li a{
color: white;
text-decoration: none;
}
.active{
background: orange;
}
p{
position: absolute;
left: 0;
top: 0;
}
</style>
实现效果图如下,但是还没有动画效果
接下来是实现动画效果
上代码
<script>
//立即执行函数传入window和document对象
(function (w,d) {
function Carousel(banner,imgs,words,itemlist,time,slide) {
console.log('插件实例化成功');
//给轮播图设置相关属性
this.banner = banner;
this.imgs= imgs;
this.words = words;
this.itemlist = itemlist.children;
this.time= time;
this.imgLength =imgs.length;//获取播放图片的数量
this.nowImg =0;
this.interval = 0;
this.slide = slide;
//给轮播图功能设置方法
this.display(this.nowImg);//传入数字
// this.displayAll();
// this.changeIndex(this.nowImg);
// this.imgScroll();
this.mouseChange();
this.autoCarousel();
}
//让图片展示
Carousel.prototype.display = function (imgNumber) {
this.imgs[imgNumber].style.display = "block";//让第一张图片显示
this.words[imgNumber].style.display = "block";//让提示语显示
this.itemlist[imgNumber].classList.add("active");//给第一个导航图标添加样式
//循环变量
for(var i=0;i<this.imgLength;i++){
if(i !== imgNumber){//i!=0其他的属性都不现实
//和上面设置相反
this.imgs[i].style.display = "none";
this.words[i].style.display ="none";
this.itemlist[i].classList.remove("active");
}
}
this.nowImg = imgNumber;//实时传入图片数量
}
//展示所有图片
Carousel.prototype.displayAll = function(){
for(var i=0;i<this.imgLength;i++){
this.imgs[i].style.display = "block";
this.words[i].style.display = "block";
}
}
//索引样式
Carousel.prototype.changeIndex = function(imgNumber){
for(var i=0;i<this.imgLength;i++){
if(i != imgNumber){
this.itemlist[i].classList.remove("active");
}
this.itemlist[imgNumber].classList.add('active');
}
}
//图片滑动
Carousel.prototype.imgScroll = function(){
if(this.slide){
this.nowImg = this.nowImg+1;
if(this.nowImg==this.imgLength){
this.nowImg = 0;
}
this.displayAll()
var container =d.getElementById('container');
this.changeIndex(this.nowImg);
container.style.marginLeft = -350*this.nowImg + "px";
container.style.transition = "all 2.5s";
clearInterval(this.interval);
var that= this;
function changAll() {
clearInterval(that.interval);
that.interval = setInterval(function () {
that.imgScroll();
},that.time)
}
container.addEventListener("transitionend",changAll);
return;
}
if(this.nowImg == this.imgLength-1){
this.nowImg =0;
}else{
this.nowImg = this.nowImg+1;
}
this.display(this.nowImg);
}
Carousel.prototype.autoCarousel = function(){
this.interval = setInterval(function () {
this.imgScroll();
}.bind(this),this.time)
}
Carousel.prototype.mouseChange = function(){
//console.log(this);
var _this= this;
//console.log(_this);
for(var i=0;i<this.imgLength;i++){
(function (i) {
_this.itemlist[i].onmouseover=function () {
clearInterval(_this.interval);
_this.display(i);
}
_this.itemlist[i].onmouseout= function () {
clearInterval(_this.interval);
_this.interval = setInterval(function () {
_this.imgScroll();
}.bind(_this),_this.time)
}
})(i)
}
}
//
w.Carousel = Carousel;
})(window,document)
//获取div节点
var jsjy_LL = document.getElementsByClassName('jsjy_LL')[0];
//获取img节点
var ysjyy_img = document.getElementsByClassName('ysjyy_img');
//获取p节点
var jsjy_LL_title = document.getElementsByClassName('jsjy_LL_title');
//获取ul节点
var itemList = document.getElementById('itemList');
//切换播放图片模式
var slide = false;
//实例化插件,并传入相关参数
var carousel = new Carousel(jsjy_LL,ysjyy_img,jsjy_LL_title,itemList,2500,slide);
</script>
慢慢看注释吧哈哈哈哈哈哈哈哈