JavaScript 图片广告自动与手动的切换
1.代码
<html>
<head>
<script type="text/javascript" src="jquery-1.8.js"></script>
<script type="text/javascript" src="pictrue-con.js"></script>
<style>
#pic1 {
background-image:url(slide-cr.jpg);
}
#pic2 {
background-image:url(slide-jubula.jpg);
}
#pic3 {
background-image:url(slide-orion.jpg);
}
#pic3,#pic2,#pic1{
display:block;
width:631;
height:195;
position:absolute;
}
#main{
display:block;
width:631;
position:relative;
left:50%;
margin:0 -315px;
}
#select>div {
display:block;
width:18px;
height:25px;
margin-right:2px;
cursor:pointer;
float:left;
overflow:hidden;
background-image:url(hp-feature-sprite.png);
background-attachment:scroll;
background-repeat:no-repeat;
}
#c1 {
background-position:0 -100px;
}
#c2 {
background-position:0 -125px;
}
#c3 {
background-position:0 -150px;
}
#select{
position:absolute;
top:5;
left:500;
z-index:2;
}
</style>
</head>
<body onload="start()">
<div id="main">
<div id="pictrue">
<a id="pic1" href="#" tabindex="1"></a>
<a id="pic2" href="#" tabindex="2"></a>
<a id="pic3" href="#" tabindex="3"></a>
</div>
<div id="select">
<div id="c1" tabindex="1"></div>
<div id="c2" tabindex="2"></div>
<div id="c3" tabindex="3"></div>
</div>
</div>
</body>
</html>
2.代码
$(document).ready(function() {
var upPic = $("#pictrue>a").first(); // 上次显示的图片
var nowPic; // 当前显示的图片
var nowi = 1;
var yy; //用来计算图片编号的位置
var upPicNo = $("#select>div").first(); //上次显示的图片编号
var nowPicNo; // 当前显示的图片编号
var size;
// 得到所要显示图片的数量
size = $("#select>div").size();
// 将除第一张图片以外的图片淡出,并初始化为第一张图片选中
$("#pictrue>a:gt(0)").fadeOut("slow");
// 第一张图片选中的同时图片编号以为选中
upPicNo.css({
"background-position": "0 -350"
});http://www.huiyi8.com/ppt/
ppt素材
// 当点击图号时,对应的图片就显示
$("#select>div").click(function() {
nowPicNo = $(this);
nowi = nowPicNo.attr("tabindex");
nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
if (!nowPic.is(':visible')) {
pictrueChange(nowPic, nowPicNo);
}
});
/**
**
*/
function pictrueChange(nowPic, nowPicNo) {
//*************************************
// 将上次选中的编号样式改回到未点击样式
var upNo = upPic.attr("tabindex");
yy = ( - 100 - (upNo - 1) * 25) + "px";
upPicNo.css({
"background-position": "0 " + yy
});
// 当前被点击图号的样式
yy = ( - 350 - (nowi - 1) * 25) + "px";
nowPicNo.css({
"background-position": "0 " + yy
});
upPicNo = nowPicNo;
upPic.fadeOut("slow");
nowPic.fadeIn("slow");
upPic = nowPic;
};
function autoPic() {
nowi = nowi + 1;
if (nowi <= size) {
nowPic = $("#pictrue>a:eq("+(nowi-1)+")");
nowPicNo = $("#select>div:eq("+(nowi-1)+")");
pictrueChange(nowPic, nowPicNo);
} else {
nowi = 0;
}
}
setInterval(autoPic, 3000);
// 图片编号的数字样式
$("#select>div").hover(function() {
// 判断如果当前图号被选中时,就不更改当前图号的鼠标移入样式
hoverFunction($(this), 225);
},
function() {
// 判断如果当前图号被选中时,就不更改当前图号的鼠标移出样式
hoverFunction($(this), 100);
});
/**
**
*/
function hoverFunction(picNumber, numLoc) {
var oldCss = picNumber.css("background-position");
oldCss = oldCss.substring(5, oldCss.length - 2);
if (oldCss < 350) {
yy = ( - numLoc - (picNumber.attr("tabindex") - 1) * 25) + "px";
picNumber.css({
"background-position": "0 " + yy
});
}
}
//$.extend({
// show:function(){
// alert("ready");
//}
//});
//setInterval("show()",3000);
});
JavaScript 图片广告自动与手动的切换的更多相关文章
- 广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片
效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...
- JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码
基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- HTML 自动、手动切换轮播 from：金水
.自动.手动切换轮播 body代码: <div id="tuijian"> <div class="pages" id="p1&qu ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
随机推荐
- Javascript拼接HTML字符串的方法列举及思路
转载过来,去掉一些废话吧. 目标: 方便的拼接字符串,不使用让人眼晕的+＝.使用过程如下: 1,先创建一个作为“模板”的字符串,如:’My name is ${name},I\’m ${age}.’ ...
- 服务器架构及实战（架构篇）- PHP建站
概述 详解 PHP的环境搭建 PHP的帮助使用和配置文件 PHP的Hello World PHP的库函数调用 PHP的Web程序 PHP的函数和面向对象使用 PHP的数据库访问 Nginx安装和配置访 ...
- Codeforces Round #386 (Div. 2) A+B+C+D!
A. Compote 水题(数据范围小都是水题),按照比例找最小的就行了,3min水过. int main() { int a,b,c; while(~scanf("%d%d%d" ...
- NYOJ-183赚钱啦,bellman//spfa水过，，题还是蛮变态的赶脚~~
赚钱啦 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 某国家里有N个城市,分别编号为0~N-1,一个精明的商人准备从0号城市旅行到N-1号城市,在旅行的过程中,从一个城 ...
- PTA 02-线性结构3 Reversing Linked List (25分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/664 5-2 Reversing Linked List (25分) Given a ...
- 【分段哈希】H. Paint the Wall
https://www.bnuoj.com/v3/contest_show.php?cid=9147#problem/H [题意] 在一个长为H,宽为W的白墙上选一个矩形区域涂颜色,后涂的颜色会覆盖先 ...
- Vim pre-work
1.先学会touch typing盲打是一切的基础 重点在于手眼协调 如果实现不了盲打.一切高效率的Vim操作都将无从做起 2.vim的使用 2.1.hjkl的移动 推荐练习贪吃蛇 和3D平衡球 ...
- 洛谷P3094 [USACO13DEC]假期计划Vacation Planning
题目描述 有N(1 <= N <= 200)个农场,用1..N编号.航空公司计划在农场间建立航线.对于任意一条航线,选择农场1..K中的农场作为枢纽(1 <= K <= 100 ...
- msp430项目编程21
msp430中项目---直流电机控制系统 1.定时器工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习
- ESI+varnish页面片段缓存
对于片段缓存,业界有成熟的解决方案,还有一个所谓的W3C标准:ESI(Edge Side Include) . ESI本身没有什么,只是一个XML的标签集合.ESI和SSI(Server Side I ...