无缝滚动代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝滚动代码相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>demo</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0;}
.banner{width:1000px;height:480px;margin:100px auto;}
.banner .box{width:1000px;height:480px;position:relative;overflow:hidden;}
.banner .box .btn{width:32px;height:480px;position:absolute;background:rgba( 0 , 0 , 0 ,.5);}
.banner .box .btn_left{left:0;background-image:url(‘images/btn_left.png‘);background-repeat:no-repeat;background-position:center;}
.banner .box .btn_right{right:0;background-image:url(‘images/btn_right.png‘);background-repeat:no-repeat;background-position:center;}
.banner .box ul{width:8000px;height:480px;position:absolute;left:0;}
.banner .box ul li{float:left;position:relative;list-style:none;}
.banner .box ul li img{float:left;border:0;}
.banner .box ul li .description{width:1000px;height:30px;position:absolute;bottom:0;font-size:18px;font-family:"microsoft Yahei";line-height:30px;text-align:center;background:rgba( 0 , 0 , 0 ,.5);}
</style>
</head>
<body>
<div class="banner">
<div class="box">
<ul>
<li>
<img src="images/6.jpg" width="640" height="480" /><img src="images/6-6.jpg" width="360" height="480" />
<div class="description">第一组图</div>
</li>
<li>
<img src="images/1.jpg" width="640" height="480" /><img src="images/1-1.jpg" width="360" height="480" />
<div>第二组图</div>
</li>
<li>
<img src="images/2.jpg" width="640" height="480" /><img src="images/2-2.jpg" width="360" height="480" />
<div>第三组图</div>
</li>
<li>
<img src="images/3.jpg" width="640" height="480" /><img src="images/3-3.jpg" width="360" height="480" />
<div>第四组图</div>
</li>
<li>
<img src="images/4.jpg" width="640" height="480" /><img src="images/4-4.jpg" width="360" height="480" />
<div>第五组图</div>
</li>
<li>
<img src="images/5.jpg" width="640" height="480" /><img src="images/5-5.jpg" width="360" height="480" />
<div>第六组图</div>
</li>
<li>
<img src="images/6.jpg" width="640" height="480" /><img src="images/6-6.jpg" width="360" height="480" />
<div>第一组图</div>
</li>
<li>
<img src="images/1.jpg" width="640" height="480" /><img src="images/1-1.jpg" width="360" height="480" />
<div>第二组图</div>
</li>
</ul>
<div class="btn_left btn"></div>
<div class="btn_right btn"></div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
/*$(document).ready(function(){});所有的函数都放在这里面，这是为了防止文档在完全加载（就绪）之前运行jQuery代码。*/
$(document).ready(function(){
var num=0;
var timer=null;
/*移入事件，停止定时器，移出事件，增加定时器*/
$(".banner .box").hover(function(){
clearInterval(timer);
},function(){
autoPlay();
});
/*点击左按钮*/
$(".banner .box .btn_left").click(function(){
move();
});
/*点击右按钮*/
$(".banner .box .btn_right").click(function(){
move_right();
});
/*自动播放函数*/
function autoPlay(){
timer = setInterval(function(){
move();
des_show();
},2000);
}
autoPlay();
/*向左移动函数*/
function move(){
num++;
if(num>6){
num = 1;
$(".box ul").css({"left":"0px"});
$(".box ul").stop().animate({left:-1000*num},200);
}else{
$(".box ul").stop().animate({left:-1000*num},200);
}
des_show();
}
/*向右移动函数*/
function move_right(){
num--;
if(num<0){
num = 5;
$(".box ul").css({"left":"-6000px"});
$(".box ul").stop().animate({left:-1000*num},200);
}else{
$(".box ul").stop().animate({left:-1000*num},200);
}
des_show();
}
/*文字描述显示*/
function des_show(){
$(".box ul li").eq(num).find("div").addClass("description").siblings().removeClass("description");
}
});
</script>
</body>
</html>
以上是关于无缝滚动代码的主要内容，如果未能解决你的问题，请参考以下文章