我做的第一个JQuery图片切换，希望大家多多指教。
16lz
2021-01-22
哈哈，第一个作品。很庆幸能成功运行。。。啦啦。。。
代码如下：
html代码：
JQuery代码：
css代码：
新手，代码写的不好。见谅。
代码如下：
html代码：
<html>
<head><title>图片自动切换演示</title>
<linkhref="./css.css"rel="stylesheet"type="text/css"/>
<scriptsrc="./jquery.min.js"type="text/javascript"></script>
<scriptsrc="./js.js"type="text/javascript"></script>
</head>
<body>
<divid="imgbox">
<ahref="#"><imgsrc="./img/1.jpg"/></a>
<ahref="#"><imgsrc="./img/2.jpg"/></a>
<ahref="#"><imgsrc="./img/3.jpg"/></a>
<ahref="#"><imgsrc="./img/4.jpg"/></a>
<ahref="#"><imgsrc="./img/5.jpg"/></a>
<ahref="#"><imgsrc="./img/6.jpg"/></a>
<divid="num">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</div>
</div>
</body>
</html>
JQuery代码：
$(document).ready(function(){
varnum=1;
varpause;
varshow=function(Y){
$('img').css({'left':'-400px'});
$('img').eq(Y).css({'left':'0px'});
$('li').removeClass("color");
$('li').eq(Y).addClass("color");
};
varrun=function(){
show(num);
num=(num!=5)?(num+1):0;
pause=setTimeout(run,5000);
};
$('li').hover(function(event){
clearTimeout(pause);
num=$(this).text()-1;
show(num);
},
function(){
num=(num!=5)?(num+1):0;
pause=setTimeout(run,2000);
});
show(0);
pause=setTimeout(run,5000);
});
css代码：
*{
border:0solid;
margin:0;
padding:0;
}
#imgbox{
border:5px;
position:relative;
margin:30px0px0px50px;
over-flow:hidden;
width:300px;
height:300px;
z-index:2;
}
#num{
position:absolute;
width:150px;
left:170px;
top:278px;
z-index:3;
}
li{
position:relative;
text-align:center;
float:left;
width:15px;
height:10px;
background-color:#C0C0C0;
margin-left:5px;
cursor:pointer;
}
img{
position:absolute;
left:-400px;
top:0px;
width:300px;
height:300px;
}
.color{
background-color:#9ACD32;
font-size:18px;
}
16 个解决方案
#1
新手，代码写的不好。见谅。
更多相关文章
- 为什么使用observe_field代码不能使用JQuery模型对话框?
- jquery 生成table表格 部分代码
- Struts2 json jQuery ajax 的集成配置与使用及 demo 演示源码示
- 使用jquery的$ .ajax来获取node.js脚本的输出，而不是它的代码
- Server.Htmlencode用于文本域显示带的html代码
- IOS学习之WebView加载本地HTML代码或网络资源
- html5 css3 背景视频循环播放代码
- HTML5 标签audio添加网页背景音乐代码
- 我无法理解为什么我的代码中的单击选择文本