Jquery 学习之路（四）高大上的图片轮换
网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。
反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效果还是很高大上的。
下载地址：http://files.cnblogs.com/xiaoshuai1992/PicChange.zip
页面+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="data:images/pic1.jpg" class="pic" />
<img src="data:images/pic2.jpg" class="pic" />
<img src="data:images/pic3.jpg" class="pic" />
<img src="data:images/pic4.jpg" class="pic" />
<img src="data:images/pic5.jpg" class="pic" />
<img src="data:images/pic6.jpg" class="pic" />
<img src="data:images/pic7.jpg" class="pic" />
<img src="data: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 学习之路（四）高大上的图片轮换的更多相关文章
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- Redis——学习之路四（初识主从配置）
首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...
- jQuery学习笔记（四）jQuery中的动画
目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...
- jQuery 学习之路（1）：引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jQuery学习之路（3）- 事件
▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...
- jQuery 学习之路（2）：选择器与过滤器
一.基本选择器 标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器 ...
- zigbee学习之路(四):按键控制(中断方式)
一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...
随机推荐
- 弹框中的elment-form在弹框重新打开后，怎么初始化验证信息
如果弹框关闭前有错误提示,弹框重新打开,由于没重新刷新页面,该错误还是存在.... 解决办法:弹框中的内容写成一个组件,prop接收父元素弹框的状态,并监听且reset表格 1. cnpm insta ...
- clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
- 背景图片移动插件MyFloatingBg(浮动背景图效果，可让背景随着页面的滚动而滚动)
MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background.你可以用于整个文件的背景,或是某几个banner的背景. 它可支持简单的animation效果,你不用去做一个fla ...
- NOIP临考经验【转】
NOIP临考经验 1.提前15分钟入场,此时静坐调整心态,适当的深呼吸 2.打开编辑器并调整为自己喜欢的界面 3.熟悉文件目录,写好准确无误的代码模板 4.压缩包或许还不能解压,但是文件名已经可以知道 ...
- (转载)Hadoop示例程序WordCount详解
最近在学习云计算,研究Haddop框架,费了一整天时间将Hadoop在Linux下完全运行起来,看到官方的map-reduce的demo程序WordCount,仔细研究了一下,算做入门了. 其实Wor ...
- C++——OOP面向对象理解
从Rob Pike 的 Google+上的一个推看到了一篇叫<Understanding Object Oriented Programming>的文章,我先把这篇文章简述一下,然后再说说 ...
- 【POJ 1201 Intervals】
Time Limit: 2000MSMeamory Limit: 65536K Total Submissions: 27949Accepted: 10764 Description You are ...
- Educational Codeforces Round 58 (Rated for Div. 2) 题解
Educational Codeforces Round 58 (Rated for Div. 2) 题目总链接:https://codeforces.com/contest/1101 A. Min ...
- POJ 2398 Toy Storage 二分+叉积
Description Mom and dad have a problem: their child, Reza, never puts his toys away when he is finis ...
- vue2学习篇一 $mount()手动挂载
$mount()手动挂载 //当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: //假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ // ...