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的更多相关文章

  1. 安卓开发笔记——自定义广告轮播Banner(实现无限循环)

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  2. android-自定义广告轮播Banner(无限循环实现)

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  3. android 项目学习随笔十六( 广告轮播条播放)

    广告轮播条播放 if (mHandler == null) {//在此初始化mHandler , 保证消息不重复发送 mHandler = new Handler() { public void ha ...

  4. Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

    为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...

  5. 自定义View(二)ViewPage广告轮播

    自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...

  6. iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  7. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  8. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  9. 纯CSS3跳动焦点广告轮播特效

    1. [代码] 纯CSS3跳动焦点广告轮播特效 <!--  Author: Developed by Caleb Jacob Author Website: http://iamceege.co ...

随机推荐

  1. Cocos2d-x ios 下http请求的另一种实现

    简单描述下需求:游戏要加入事件log,比如玩家升到10级:创建角色:或是,触发这些事件后要求客户端忘后台抛送一条log信息.一般情况下,我们可以直接使用cocos自带的HttpClient(底层用li ...

  2. SVN安装详解

    (一)安装服务器端1. 先安装VisualSVN-Server-2.6.0.msi 2.点击Next SVN服务端已经安装好了 选中Repositores --->选中“新建”---->点 ...

  3. 浅谈Xcode5和Xcode7在系统创建的文件夹和文件中的区别

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. 删除共享内存后key为0x00000000的问题

    一开始是 ------ Shared Memory Segments -------- key shmid owner perms bytes nattch status root dest gyf ...

  5. How to Kill All Processes That Have Open Connection in a SQL Server Database[关闭数据库链接 最佳方法] -摘自网络

    SQL Server database administrators may frequently need in especially development and test environmen ...

  6. 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码

    前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...

  7. freemaker分页备忘

    思路:定义一个freemaker宏,接收参数.然后在freemaker页面上import这个文件,把参数传进来在server端渲染. 分页标签:pager.ftl <#-- 自定义的分页指令. ...

  8. 启用PowerShell Web Access

    Windows PowerShell Web Access(PSWA)是 Windows Server 2012 中的新功能,充当 Windows PowerShell 网关,允许远程计算机基于 We ...

  9. 每天进步一点达——MySQL——myisampack

    一.        简单介绍 myisampack是一个压缩使用MyISAM引擎表的工具,通常会压缩40%~70%,当须要訪问数据.server会将所须要的信息读入到内存中.所以当訪问详细记录时,性能 ...

  10. [Canvas] Introduction to drawing with p5js

    In this lesson we look at using color and the basic drawing methods of p5js, and how they can be com ...