通过更改元素透明度实现轮播图效果。
依赖jQuery开发的一个小插件
/**
* Created by Administrator on 2017/6/9.
*/
var BulidSlid = function () {
var ind = 0;
var timer;
var leng;
//根据屏幕宽度调节轮播图高度
this.autoHeight = function (w, h) {
var w = w || 3,
h = h || 1;
if( $(".banner").width() > 1100 ){
var hei = $(".banner").width() / w; //根据 给出的长宽为 1500*500 长宽比为 3:1
$(".banner").css("height",hei*h);
$(".slid").css("height",hei*h);
$(".slid li img").css("height",hei*h);
}
}
//设置定时器 开始自动轮播
this.autoSlid = function ( index ) {
ind = index || ind;
$(".slid").children().eq( ind ).fadeIn(500).siblings().fadeOut();
$(".dot-box li").removeClass("dot");
$(".dot-box").children().eq( ind ).addClass("dot");
if ( ind < leng -1 ){
ind++;
}else{
ind = 0;
}
timer = setTimeout(this.autoSlid.bind(this),4000); //延时器
}
//小圆点的点击事件
this.dot = function ( that ) {
ind = $( that ).index();
this.autoSlid( ind );//调用自动轮播方法
clearTimeout( timer );//先清除延时器
}
//初始化轮播图 构建小圆点
this.init = function () {
leng = $(".slid li").length;
if( leng > 1 ){
for( var i = 0 ; i < leng ; i++ ){ //根据图片数量生成对应的小圆点
var str = '<li οnclick="slid.dot( this )"></li>';
$(".dot-box").append( str );
};
this.autoSlid( ind ); //调用自动轮播
$(".banner").hover(
function () {
if(timer) clearTimeout(timer);
},function () {
timer = setTimeout(this.autoSlid.bind(this),4000);
}.bind(this)
)
}
this.autoHeight();
}
}
var slid = new BulidSlid();
//监听窗口变化
$(window).resize(function() {
slid.autoHeight(); //调用自动调节高度方法 窗口变化 图片自己去适应
});
<!--轮播 开始-->
<div class="banner">
<ul class="slid">
<li class="slid-show"><a href="javascript:"><img src="../images/banner/banner1.jpg"/></a></li>
<li><a href="javascript:"><img src="../images/banner/banner2.gif"/></a></li>
<li><a href="javascript:"><img src="../images/banner/banner3.jpg"/></a></li>
<!--<li><a href="javascript:"><img src="../images/banner/banner4.jpg"/></a></li>-->
<!--<li><a href="javascript:"><img src="../images/banner/banner5.jpg"/></a></li>-->
</ul>
<div class="banner-dot">
<ul class="dot-box"></ul>
</div>
</div>
<!--轮播 结束-->
调用的话 只需要加一段
<script>
$(function(){
slid();
})
</script>
参数的话 就只有宽高比列可以调整了
直接给
slid.autoHeight();
传一个宽高比例进去就可以了;会先获取到元素的宽度在进行高度的计算。
到目前为止,插件还不是很完善 ,有机会还是得完善一下。
不过可以根据自己的项目实际需求去更改。