1. 图片轮播所需js
// JavaScript Document
var t = 0;
var n = 0;
var count = 0;
//需要延迟加载
setTimeout(function(){
count = $("#play_list a").size();
$("#play_list a:not(:first-child)").hide();
$("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
$("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
$("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank");});
$("#play_text li").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count){
return;
}
$("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
$("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank");});
$("#play_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);
$(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
});
t = setInterval("showAuto()", 2000);
$("#play").hover(function(){clearInterval(t);}, function(){t = setInterval("showAuto()", 2000);});
},1500);
function showAuto()
{
n = n >= (count - 1) ? 0 : n + 1;
$("#play_text li").eq(n).trigger('click');
}
2. 页面调用
<div id="picture">
<div id="play">
<div id="play_bg" class="scrollDiv">
<div id="play_info"></div>
<div id="play_text">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div id="play_list">
</div>
</div>
</div>
分享到:
相关推荐
简单图片切换效果JS插件,效果比较简单,包含源代码,若需要复杂的切换效果,请自行修改源代码。使用方法:一句代码调用,获取HTML页面中输出的UL列表内容自动生成图片轮播效果。兼容全浏览器。代码功能比较简单,...
可调用多次的图片轮换、切换js方法,基于jquery改的,简单实用
JS多种新闻图片切换效果源码,已经封装好JS,只需简单调用即可。
1.JS版图片轮换广告 2.SWF版图片轮换广告 3.内含调用示例
Js网页TAB,图片轮播插件附示例代码,包括了选项卡和网页焦点图效果的图片展示插件,都是些常用的网页特效代码,LixTabs,javascript TAB切换类,LixTabs:实现一个普通的tab选项卡切换效果,不自动,无延迟,鼠标指向...
一个用javascript实现的图片轮播效果代码,兼容各种浏览器(IE、Firefox、Chrome),体积小,不压缩也只有10kb,调用方便,比一般的flash轮播效果更省资源,更快的加载速度。
一个用 Javascript 实现的图片轮播效果,兼容各种浏览器(IE、Firefox、Chrome),体积小,不压缩也只有 10kb,调用方便,比一般的 flash 轮播效果更省资源,更快的加载速度。 示例: 页面中已经存在名为...
实现图片轮播广告轮换的js 调用了macromedia网站的借口 具体自己看吧
A 可以调用文件外js的函数 只要<title>< title><script language "JavaScript" src " javascript js">< script>有包含 B 可以调用同文件内的php函数 C 可以调用...
用原生js改写,实现一个页面上显示多个图片轮播功能,调用同一函数,减少代码冗余
一个用JavaScript实现的图片轮播效果代码,兼容各种浏览器(IE、Firefox、Chrome),体积小,不压缩也只有10kb,调用方便,比一般的flash轮播效果更省资源,更快的加载速度。
原生JS写的图片放大效果插件,调用方法很简单,效果比较简单,兼容各浏览器,代码也不多,如需更复杂的效果,可自行修改代码。
类似于苹果相册的图片切换效果如何使用: 步骤 1 - 安装 Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. <script type="text/javascript" src="js/...
实现广告图片切换的功能,就像中关村在线的那种。
chatgpt html js 对接接口, 切换index.js中的api变量直接使用即可
VkFlash!是一套Flash图片轮播管理系统。基于RuoChi的Bcastr加工并二次开发而成。采用ASP Access编写。可以自定义各方各面,打造个性化的Flash轮播!...02.增加后台Javascript方式调用广告的提示信息
首先给大家看一看js图片轮播效果,如下图 具体思路: 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、...
很漂亮的JS图片切换特效,鼠标划过缩略图大图就跟着变化,纯JS实现,调用很方便。
利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示、推荐商品之类的栏目。它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张...