码迷,mamicode.com
首页 > Web开发 > 详细

JS滚动展示,左右方向按钮

时间:2015-04-23 12:28:31      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>

</head>

<style>

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

#mrt,#mrt dl{ overflow:hidden; height:160px;}

#mrt dl{ position:relative; left:0px;}

span{width:35px;height:160px; display:block;}

img{width:230px; height:160px;}

span,dd,#mrt{float:left}

</style>

<body>

<span id=‘left‘>左</span>

<div id="mrt"> 

    <dl>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_auto.jpg‘ /></a></dd>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_home.jpg‘ /></a></dd>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_nba.jpg‘ /></a></dd>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_stock.jpg‘ /></a></dd>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_home.jpg‘ /></a></dd>

        <dd><a href="#" target="_blank"><img src=‘http://luxury.bjhoutai.com/images/ad_nba.jpg‘ /></a></dd>

    </dl> 

</div>

    <span id=‘right‘>右</span>

<script> 

var time = 0;

var num = 6;

var width = 230;

var height = 160;

document.getElementById(‘mrt‘).style.width = num*width/2+"px";  

document.getElementById(‘mrt‘).getElementsByTagName(‘dl‘)[0].style.width = num*width+"px"; 

var Auto=setInterval("move()",5000);

function move(){  

if(parseInt($("#mrt dl").css(‘left‘)) <= 0 && parseInt($("#mrt dl").css(‘left‘))>-690){

$("#mrt dl").animate({

left:‘-=230px‘

},500);  

}else{

$("#mrt dl").animate({

left:‘0px‘

},500);  

}

}

$(‘#left‘).click(function(){

if(time == 0){ 

time = 1;

setTimeout("test()",500);

if(parseInt($("#mrt dl").css(‘left‘)) <= 0 && parseInt($("#mrt dl").css(‘left‘))>-690){ 

$("#mrt dl").animate({

left:‘-=230px‘

},500);   

}  

}

});

$(‘#right‘).click(function(){ 

if(time == 0){ 

time = 1;

setTimeout("test()",500); 

if(parseInt($("#mrt dl").css(‘left‘)) < 0 && parseInt($("#mrt dl").css(‘left‘))>=-690){ 

$("#mrt dl").animate({

left:‘+=230px‘

},500);  

}  

}

});

function test(){

if(time == 1){

time--;

}

$(‘#mrt dd‘).mouseover(function(){window.clearInterval(Auto);});

$(‘#mrt dd‘).mouseleave(function(){Auto = setInterval(‘move()‘,5000);}); 

</script>

</body>

</html>

JS滚动展示,左右方向按钮

标签:

原文地址:http://www.cnblogs.com/mrt-yyy/p/4449930.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!