您的位置：首页 > Web前端 > JQuery

陈华：jquery不转原生javascript实现热点无缝滚动效果代码复用

2015-05-19 20:43 921 查看

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<style type="text/css">

*{margin:0; padding:0; border: none;}

.tab{width: 450px; height: 45px; border:3px solid #CCC; margin:20px auto; position: relative; overflow:hidden;}

.tab ul{ width: 450px; position: absolute; top:0; left:0;}

.tab ul li{ height:45px; line-height: 45px; font-size: 18px; font-weight: bold; text-align: center; color:#FFF; list-style:none;}

</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

/**

* @Author: ChenHua

* @DateTime: 2015-05-19 20:47:00

* @Description: http://chenhua.wang qq:276004561

*/

$(function(){

$('.tab ul').html(function(index,value){

return value + value;

})

$('.tab ul').each(function(){ //初始化jquery参数

$(this).data("c", 0);

// $(this).data("timer", null);

var jqthis = $(this);

$(this).data("run",function(){

if(jqthis.data('c')==5){ //判断断点情况

jqthis.data('c',0);

jqthis.css('top',0);

}

// alert(jqthis.data('c'))

jqthis.data('c',jqthis.data('c')+1) //序号自增

jqthis.animate({'top':-45*jqthis.data('c')},500); //运动

});

$(this).data("timer", setInterval($(this).data('run'),1000))

})

$('.tab ul').hover(function(){ //上浮事件

clearInterval($(this).data("timer"));

},function(){

$(this).data("timer", setInterval($(this).data('run'),1000))

})

})

</script>

</head>

<body>

<div class="tab">

<ul>

<li style="background:red">我是 1 号新闻轮播内容</li>

<li style="background:blue">我是 2 号新闻轮播内容</li>

<li style="background:yellow">我是 3 号新闻轮播内容</li>

<li style="background:green">我是 4 号新闻轮播内容</li>

<li style="background:orange">我是 5 号新闻轮播内容</li>

</ul>

</div>

<div class="tab">

<ul>

<li style="background:red">我是 1 号新闻轮播内容</li>

<li style="background:blue">我是 2 号新闻轮播内容</li>

<li style="background:yellow">我是 3 号新闻轮播内容</li>

<li style="background:green">我是 4 号新闻轮播内容</li>

<li style="background:orange">我是 5 号新闻轮播内容</li>

</ul>

</div>

<div class="tab">

<ul>

<li style="background:red">我是 1 号新闻轮播内容</li>

<li style="background:blue">我是 2 号新闻轮播内容</li>

<li style="background:yellow">我是 3 号新闻轮播内容</li>

<li style="background:green">我是 4 号新闻轮播内容</li>

<li style="background:orange">我是 5 号新闻轮播内容</li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航