jquery实现图片轮换

最新推荐文章于 2021-12-13 14:03:34 发布

xiaolifangfulei

最新推荐文章于 2021-12-13 14:03:34 发布

阅读量605

点赞数 1

文章标签： jquery html 图片轮换

本文链接：https://blog.csdn.net/xiaolifangfulei/article/details/48932519

版权

用jquery编写的图片轮换，微小作品，记录生活

HTML源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮换</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="maintype_left">
<div class="scroll_mid">
<img src="images/dd_scroll_1.jpg" id="dd_scroll" />

<ul id="scroll_number">
<li onMouseOver="show(1)" onMouseOut="start()">1</li>
<li onMouseOver="show(2)" onMouseOut="start()">2</li>
<li onMouseOver="show(3)" onMouseOut="start()">3</li>
<li onMouseOver="show(4)" onMouseOut="start()">4</li>
<li onMouseOver="show(5)" onMouseOut="start()">5</li>
<li onMouseOver="show(6)" onMouseOut="start()">6</li>
</ul>
</div>
</div>
</body>
</html>

main.css源码

*{
background:transparent;
border 0;
margin:0;
padding:0;
vertical-align baseline;
}

ul{
list-style-type: none;
}

body{
background-color:#dfdfdf;
}

.maintype_left{
margin:10px 0 0 11px;
width:545px;
height:260px;
}

index.css源码：

.scroll_mid{
background-color:#f2f2f3;
border-left:solid 1px #d6d5d6;
border-right:solid 1px #d6d5d6;
width:535px;
height:250px;
padding:5px 5px 5px 5px;
float:left;
}

#dd_scroll{
float:right;
}

#scroll_number{
clear:both;
padding-right:10px;
display:inline;
}

#scroll_number li{
width:20px;
line-height:16px;
text-align:center;
border:solid 1px #999;
margin-top:5px;
font-size:12px;
float:left;
}

.scroll_number_out{
background-color:#f2f2f3;
}

.scroll_number_over{
background-color:#F96;
color:#FFF;
}

index.js源码：

var mytime;
var index=0;
function start(){
mytime=window.setInterval("show()",1000);
}

var Maxpic;
function show(num){
if(Number(num)){//判断用户有没有选择图片下面的数字
index=num;
clearInterval(mytime);//清空定时器
}else{
//如果用户没有选择数字,做自然轮换
index=index%6+1;
}
//修改要显示的图片
$("#dd_scroll").attr("src","images/dd_scroll_"+index+".jpg")

//将图片下面的所有数字的样式复原
$("#scroll_number li").attr("class","scroll_number_out");

//修改当前显示的图片对应的数字的样式
$("#scroll_number li").eq(index-1).attr("class","scroll_number_over");
}
mytime=setInterval("show()",1000);