templates/news/index.html
<div class="news-wrapper">
<div class="banner-group">
<ul class="banner-ul">
<li>
<a href="">
<img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
src/css/index.scss
.news-wrapper{
float: left;
width: 798px;
height: 500px;
background: #fff;
.banner-group{
width: 100%;
height: 202px;
background: #0a275a;
.banner-ul{
overflow: hidden;
width: 798px * 4;
li{
float: left;
width: 798px;
height: 202px;
img{
width: 798px;
height: 202px;
}
}
}
}
}
.sidebar-wrapper{
float: right;
width: 356px;
height: 500px;
background: darkseagreen;
}
}
}
templates/news/index.html
<script src="../../dist/js/jquery-3.3.1.min.js" ></script>
<script src="../../dist/js/index.min.js" ></script>
<ul class="banner-ul" id="banner-ul">
src/js/index.js
//初始化
function Banner() {
};
//添加一个run方法
Banner.prototype.run = function () {
var bannerUL = $("#banner-ul");
//500是间隔时间0.5s
bannerUL.animate({"left":-798},500)
};
//页面加载完成后执行。创建一个对象,运行方法
$(function () {
var banner = new Banner();
banner.run()
});
src/js/index.js
//添加一个run方法
Banner.prototype.run = function () {
var bannerUL = $("#banner-ul");
var index = 0;
setInterval(function () {
if(index >= 3){
index = 0
}else{
index++;
}
bannerUL.animate({"left":-798*index},500);
},2000);
};