html轮播图向左改为向下,jQuery之轮播图向左滚动动画【原创】

最近在做项目时遇到轮播图的问题。一开始只是做了淡入淡出的效果，设计师要求是背景图不动，中间内容向左滚动。效果图如下：

主要的思路：就是设置一个大的div，把几张banner图从左往右排列。外面的大div给position:relative,而里面的内容设置position：absolute。

这样，给外面的大盒子定时滚动，里面的内容也就跟着滚动。从而达到向左滚动的效果。

下面是代码部分：

CSS代码：

/*轮播图*/

.banner{ min-width:1200px; height:350px; margin:0px auto; position:relative;overflow: hidden; }

.btn{ width:1000px; height:350px; position:absolute; top:50%; left:50%; margin-left:-500px; margin-top:-265px; z-index: 999;}

.btn_bottom{ background: rgba(0,0,0,0.19); position:absolute; bottom:10px; left:48%; z-index:9999; padding:5px 10px; }

.btn_bottom div{ width:20px; height:10px; background: #bfbfbf; float:left; margin-left:10px;}

.content{ width:100%; height:350px; position:relative; background: url(../images/banner2_03.jpg) no-repeat; background-size:100% 100%; }

.content_box{ width:600%; height:350px; position:relative;}

.content_list{ height:350px; float:left; position:relative;}

.pic1{ background:url(../images/banner1_01.png) top center no-repeat;}

.pic2{ background:url(../images/banner2_01.png) top center no-repeat;}

.pic3{ background:url(../images/banner3.png) top center no-repeat;}

.pic4{ background:url(../images/banner4.png) top center no-repeat;}

.pic5{ background:url(../images/banner5.png) top center no-repeat;}

.pic6{ background:url(../images/banner1_01.png) top center no-repeat;}

.enter_btn{ display:block; width:200px; height:50px; background:#f76c6c; color: #fefefe; font-size:18px; text-align:center; line-height:50px; font-family:"微软雅黑";

position: absolute; bottom:60px; left:58%; border-radius:5px; margin-left:-100px; margin-right:100%;}

JS代码：

//轮播图

var windows = $(".content").width();//获取自适应banner的宽度

var index=0;

var maxindex=$(".content_list").length;//获取轮播图的个数

function check(){

var width = -windows*index+"px";//计算每个轮播图需要向左滚动的距离

$(".content_box").animate({left: width},800);//给大DIV向左滚动一个屏幕的距离

$(".btn_bottom div").css("background","#bfbfbf");

$(".btn_bottom div").eq(index).css("background","#ff7676");//给按钮添加切换的样式

}

function add(){

index++;

if(index==maxindex) {

index=0;

}//图片滚到最后一张时，回到第一张

}

function settimer(){

timer=setInterval(function(){

add();

check();

},3000);

}//设置定时器

settimer();//调用定时器函数

$(".banner").mouseover(function(){

clearInterval(timer);//鼠标移上去时，清除定时器

})

$(".banner").mouseout(function(){

settimer();//鼠标移走时，再启动定时器

})

$(".btn_bottom div").click(function(){

index=$(this).index();

check();

})//设置按钮切换功能

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/6796.html

微信打赏

支付宝打赏

感谢您对作者Eva的打赏，我们会更加努力！    如果您想成为作者，请点我