Jquery编程开发如何实现图片轮换
网站首页没有一点动画怎么可以，我以前用过flash as3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，ie8不兼容模式下 设置有透明效果的p 样式添加失效了，但是我用谷歌，ie8兼容测试都ok。
反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。
页面+js代码
代码如下:
<script type="text/javascript">
var piccurrent = 1;
var pictotal = 8;
var interval; //自动运行
function picchange(current) {
//停止当前动画
if ($("#pimg").is(":animated")) { $("#pimg").stop(); }
piccurrent = current;
//为当前选择的设置样式
$("#plink").find("a").removeclass("picselect")
$("#plink").find("a[title='" + piccurrent + "']").addclass("picselect");
//设置下面的图片说明
var remark = "<a href=\"images/pic" + piccurrent + ".jpg\">";
switch (piccurrent) {
case 1: remark += " 菊花〔拉丁学名：dendranthema morifolium（ramat. ）tzvel.〕，常用chrysanthemum。菊花是菊科，菊属多年生草本... "; break;
default: remark += piccurrent + "测试说明"; break;
}
remark += "</a>";
$("#picremark").html(remark);
//运行动画
$("#pimg").animate({ left: -((piccurrent - 1) * 1000) + "px" }, "1000");
return false;
}
//暂不需使用
function picper() {
if (piccurrent > 1) {
piccurrent--;
}
else {
piccurrent = pictotal;
}
picchange(piccurrent);
}
//下一张
function picnext() {
if (piccurrent == pictotal) {
piccurrent = 1
}
else {
piccurrent++;
}
picchange(piccurrent);
}
//自动切换图片
function picrun(functionname) {
picchange(1);
interval = setinterval(picnext, "3000");
}
$(document).ready(function () {
picrun();
});
</script>
代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>图片切换</title>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<link href="picchange.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="picmain">
<p class="picimg" id="pimg">
<img src="images/pic1.jpg" class="pic" />
<img src="images/pic2.jpg" class="pic" />
<img src="images/pic3.jpg" class="pic" />
<img src="images/pic4.jpg" class="pic" />
<img src="images/pic5.jpg" class="pic" />
<img src="images/pic6.jpg" class="pic" />
<img src="images/pic7.jpg" class="pic" />
<img src="images/pic8.jpg" class="pic" />
</p>
<p class="picaction" id="plink">
<a href="images/pic8.jpg" title="8" onclick=" return picchange(8)" class="">8</a> <a href="images/pic7.jpg" title="7" onclick=" return picchange(7)">7</a> <a href="images/pic6.jpg" title="6"
onclick=" return picchange(6)">6</a> <a href="images/pic5.jpg" title="5" onclick=" return picchange(5)">
5</a> <a href="images/pic4.jpg" title="4" onclick=" return picchange(4)">4</a>
<a href="images/pic3.jpg" title="3" onclick=" return picchange(3)">3</a> <a href="images/pic2.jpg"
title="2" onclick=" return picchange(2)">2</a> <a href="images/pic1.jpg" title="1"
onclick=" return picchange(1)" class="">1</a>
</p>
<p id="picremark" class="picremark">
测试介绍文件了啊</p>
</p>
</body>
</html>
css的实现
代码如下:
.picmain
{
margin: auto;
overflow: hidden;
width: 1000px;
height: 400px;
position: relative;
}
.picimg
{
width: 10000px;
height: 400px;
background-color: #000000;
position: absolute;
top: 0px;
}
.picremark
{
position: absolute;
width: 500px;
height: 50px;
bottom: 0px;
left: 0px;
color: #ffffff;
text-indent: 2em;
}
.picremark a
{
color: #ffffff;
text-decoration: none;
}
.picremark a:hover
{
text-decoration: underline;
}
.picaction
{
position: absolute;
width: 1000px;
height: 50px;
background-color: #000000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
overflow: auto;
bottom: 0px;
left: 0px;
text-align: right;
}
.picaction a
{
border: 1px solid #c0c0c0;
width: 30px;
height: 30px;
float: right;
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
font-weight: bold;
margin-top: 10px;
display: block;
margin-right: 10px;
}
.pic
{
width: 1000px;
height: 400px;
float: left;
}
.picselect
{
background-color: #919191;
}
上一篇： jQuery中DOM树操作之使用反向插入方法实例教程分析
下一篇： JS正则表达式判断有效数实例代码