一个轮播图小demo ---之js定时器的妙用

最新推荐文章于 2024-05-31 08:30:00 发布

江南风雨2013

最新推荐文章于 2024-05-31 08:30:00 发布

阅读量3.3k

点赞数

分类专栏： js 文章标签：轮播图 js定时器

本文链接：https://blog.csdn.net/u012028371/article/details/52527565

版权

js 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

直接上demo

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>huadong</title>
<link rel="stylesheet" type="text/css" href="style/huadong.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="out">
<div class="wrap" id="wrap">
<ul class="ye" id="ye">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="dot">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="next"></div>
<div class="pre"></div>
</div>

<script type="text/javascript">
var ye =document.getElementById('ye');
var num =0;
//var num1 =num /(-300);
var num1 =0;
var time =null;
var time_click = null;

/* ye.style.left = 0;
console.log(ye.style.left);*/
function move(){
ye.style.left =num+'px';
num1 =num /(-300);
$('.dot li').css('background-color','#999');
$('.dot li').eq(num1).css('background-color','#000');
num -= 300;
if(num <= -1200){
num =0;
}
console.log(num);
}
function zidong(){
time = setInterval('move()',1000);
}

zidong();


$('.dot li').on('click',function(){
clearInterval(time);
clearTimeout(time_click);
var index =$(this).index();
ye.style.left = (-300)*index+'px';
$('.dot li').css('background-color','#999');
$(this).css('background-color','#000');

time_click= setTimeout('zidong()',0);
});
$('.pre').on('click',function(){
clearInterval(time);
clearTimeout(time_click);
num -=300;
if(num <= -1200){
num =0;
}
ye.style.left = num + "px";
num1 =num /(-300);
$('.dot li').css('background-color','#999');
$('.dot li').eq(num1).css('background-color','#000');

time_click= setTimeout('zidong()',0);
});
$('.next').on('click',function(){
clearInterval(time);
clearTimeout(time_click);
num +=300;
if(num >0){
num =-900;
}
ye.style.left = num + "px";
num1 =num /(-300);
$('.dot li').css('background-color','#999');
$('.dot li').eq(num1).css('background-color','#000');

time_click= setTimeout('zidong()',0);
});
$('.ye li').hover(function(){
clearInterval(time);
},function(){
time = setInterval('move()',1000);
});
</script>
</body>
</html>

css文件

/*@charset 'utf-8';*/
@charset "utf-8";

/************* Reset CSS *************/
/* 清除内外边距 */
html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset,iframe, lengend, label, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}

h1 ,h2 ,h3 ,h4, h5, h6 { font-size: 100%; }

address, cite, dfn, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img, button{ border: none;}
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

img, iframe, table, form{ vertical-align: top;}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
border: none;
height: 1px;
}
textarea{resize:none}
button, input, select, textarea, label{outline:none}
/************* Reset CSS *************/

/*正文*****************************************************/
.ye li{
float:left;
width:300px;
height:300px;

}
li:nth-of-type(1){
background-color:yellow;
}
li:nth-of-type(2){
background-color:green;
}
li:nth-of-type(3){
background-color:blue;
}
li:nth-of-type(4){
background-color:red;
}

.wrap{
border:1px solid #999;
width:300px;
height:300px;
/*margin:30px auto 0;*/
overflow:hidden;
}
.ye{
width:1200px;
height:300px;
position:relative;
}
.out{
position:relative;
width:300px;
margin:30px auto 0;
}
.dot,.next, .pre{
position:absolute;
}
.dot:after{
display: block;
clear:both;
content: '';
height:0px;
overflow:hidden;
}
.dot{
margin: 20px 0px 0 98px;
}
.dot li{
float:left;
height:10px;
width:10px;
border-radius: 50%;
background-color:#999;
margin-left: 5px;

}
.pre{
width: 50px;
height: 50px;
background-color: #999;
top: 50%;
right: -83px;
}
.next{
width: 50px;
height: 50px;
background-color: #999;
top: 50%;
left: -83px;
}