Jquery 实现图片轮换
更新时间：2015年01月28日 11:09:46 投稿：hebedich
这篇文章主要介绍了Jquery 实现图片轮换,虽然还有点小问题，但是影响不大，还是推荐给大家，需要的朋友可以参考下
网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。
反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。
页面+JS代码
复制代码 代码如下:
<script type="text/javascript">
var picCurrent = 1;
var picTotal = 8;
var interval; //自动运行
function picChange(current) {
//停止当前动画
if ($("#divImg").is(":animated")) { $("#divImg").stop(); }
picCurrent = current;
//为当前选择的设置样式
$("#divLink").find("a").removeClass("picselect")
$("#divLink").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);
//运行动画
$("#divImg").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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>
<div class="picMain">
<div class="picimg" id="divImg">
<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" />
</div>
<div class="picaction" id="divLink">
<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>
</div>
<div id="picremark" class="picRemark">
测试介绍文件了啊</div>
</div>
</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实现点击关注和取消功能，需要的朋友参考下吧2017-07-07
jQuery中RadioButtonList的功能及用法实例介绍
RadioButtonList的使用想必大家都有所解除，本文为以示例的方式为大家详细介绍下其功能及用法，感兴趣的朋友可以参考下2013-08-08
jQuery中为我们提供了很多有用的方法和属性，自己总结的一些常用的函数，方法。个人认为在开发中会比较常用的，仅供大家学习和参考。2009-06-06
对于一个表格，为了更好的用户体验度，需要把选中的表格项添加高亮，下面小编给大家介绍使用jquery实现表格中点击相应行变色功能的实例代码，需要的朋友参考下2016-05-05
这篇文章主要介绍了jQuery实现获取多选框的值,结合实例形式分析了jQuery事件响应及页面元素属性获取相关操作技巧,需要的朋友可以参考下2020-02-02
本篇文章主要介绍了ajax图片上传，图片异步上传，更新，具有一定的参考价值，有想去的可以了解一下。2016-12-12
这篇文章主要介绍了jQuery网页选项卡插件rTabs用法,较为详细的分析了jquery选项卡插件rTabs的定义、实现及使用方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
JQuery 应用 JQuery.groupTable.js
在以往的项目中，数据浏览用的都table 的形式展现。如下图1， 这是一个很常见的表格。通常对分类的字段先进行排序。为了让分类表现的更直观。2010-12-12
这篇文章主要介绍了jQuery自定义滚动条,以完整实例形式分析了jQuery响应scroll事件及鼠标事件实现滚动条效果的相关技巧,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇jQuery效果函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
最新评论