仿主题广告轮播js
function SlideShow(c) {
var a = document.getElementById("slide");
var f = document.getElementById("slide_Img").getElementsByTagName("li");
var h = document.getElementById("slideBar");
var n = h.getElementsByTagName("li");
var d = f.length;
var c = c || 3000;
var e = lastI = 0, j, m;
function b() {
m = setInterval(function () {
e = e + 1 >= d ? e + 1 - d : e + 1;
g()
}, c)
}
function k() {
clearInterval(m)
}
function g() {
f[lastI].style.display = "none";
n[lastI].className = "";
f[e].style.display = "block";
n[e].className = "no";
lastI = e
}
f[e].style.display = "block";
a.onmouseover = k;
a.onmouseout = b;
h.onmouseover = function (i) {
j = i ? i.target : window.event.srcElement;
if (j.nodeName === "LI") {
e = parseInt(j.innerHTML, 10) - 1;
g()
}
};
b()
}
界面:
<div class="slide" id="slide">
<div class="slideImg">
<ul id="slide_Img">
<asp:Repeater ID="Index_PosterCenter1_rpt" runat="server">
<ItemTemplate>
<li><a href="<%#Eval("") %>" style="border: none;" target="_blank" title="">
<img src="SlideImg/slideImg_01.png" style="border: none; width: 510px; height: 250px;"
alt="" />
</a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div class="slideBar" id="slideBar">
<ul>
<li class="no">1</li>
<% for (int i = 1; i < 4; i++)
{
%>
<li>
<%=i+1 %></li>
<% }%></ul>
<div class="bg">
</div>
</div>
<script type="text/javascript">
SlideShow(3000);
</script>
</div>
网站首页主题图片轮播效果。
仿主题广告轮播js的更多相关文章
- 安卓开发笔记——自定义广告轮播Banner(实现无限循环)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- android-自定义广告轮播Banner(无限循环实现)
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
- android 项目学习随笔十六( 广告轮播条播放)
广告轮播条播放 if (mHandler == null) {//在此初始化mHandler , 保证消息不重复发送 mHandler = new Handler() { public void ha ...
- Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换
为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...
- 自定义View(二)ViewPage广告轮播
自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...
- 纯CSS3跳动焦点广告轮播特效
1. [代码] 纯CSS3跳动焦点广告轮播特效 <!-- Author: Developed by Caleb Jacob Author Website: http://iamceege.co ...
随机推荐
- C#实现Zip压缩解压实例【转】
本文只列举一个压缩帮助类,使用的是有要添加一个dll引用ICSharpCode.SharpZipLib.dll[下载地址]. 另外说明一下的是,这个类压缩格式是ZIP的,所以文件的后缀写成 .zip. ...
- 《征服c指针》学习笔记-----统计文本单词数目的程序word_count
1.程序的要求:对用户指定的英文文本文件(包括标准输入),将英文单词按照字母顺序输出到用户指定的文本文件中(包括标准输出),并且在各单词后面显示单词的出现次数. 2.模块设计: 主要分为:1.从输入流 ...
- NDK编译路径问题
有点偷懒,在一个使用了jni工程里面稍微修改一下,编译另外一个jni工程. 代码写完后,Android.mk等文件也写好,但是ndk-build的时候提示Android NDK:Your APP_BU ...
- BCP的用法
bcp kaiser..kp_rates in c:\kp.bcp -U buykporg -P buykporg -S localhost -c bcp ccrm_oem_shqc.."s ...
- storm的功能、三大应用
storm的功能 Storm 有许多应用领域:实时分析.在线机器学习.持续计算.分布式 RPC(远过程调用协议,一种通过网络从远程计算机程序上请求服务). ETL(Extraction-Transfo ...
- oracle数据库自动备份脚本
::通过exp命令导出远程机器(192.168.2.1)上指定服务(orcl)指定用户(pmis)及密码(pmis)的数据 ::运行该脚本的机器必须安装oracle @echo off @echo [ ...
- .Net设计模式_开篇
前言 其实以前看过两次设计模式,现在想来,几乎已经对设计模式没有任何印象,说明根本没有理解.或者说几乎不用,所以我除了单列.工厂外的设计模式几乎全部忘记了.最近需要写一个引擎,想用UML设计整体的架构 ...
- 在Spring中使用JDK定时器实现调度任务
在Spring中使用JDK定时器实现调度任务 作者:chszs,转载需注明.博客主页: http://blog.csdn.net/chszs 本文探讨Spring如何集成JDK的Timer定时器,实现 ...
- 基于XMPP协议的aSmack源码分析
在研究如何实现Pushing功能期间,收集了很多关于Pushing的资料,其中有一个androidnp开源项目用的人比较多,但是由于长时间没有什么人去维护,听说bug的几率挺多的,为了以后自己的产品稳 ...
- [HTML5] Accessible Icon Buttons
Icon buttons are very common in web applications, yet they often have accessibility problems. Learn ...