图片轮播 js代码
<script type="text/javascript">
//图片轮换
$(function () {
//------------------
var sWidth = 980; //获取焦点图的宽度(显示面积)
var sHeight = 90; //获取焦点图的高度
var timeInterval = 3000; //获取间隔时间
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
if (len > 1) {
//以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for (var i = 1; i <= len; i++) {
btn += "<span>" + i + "</span>";
}
btn += "</div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0.5);
//为小按钮添加鼠标滑入事件,以显示相应的内容
$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width", sWidth * (len)); //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, timeInterval); //此4000代表自动播放的间隔,单位:毫秒
}).trigger("mouseleave");
};
//显示图片函数,根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); //为当前的按钮切换到选中的效果
}
})
</script>
@{
ViewBag.Title = "获取焦点图";
Layout = null;
List<AdManage> focusList = ViewData["FocusPic"] as List<AdManage>;
string AccountUrl = CommonFun.GetAppSettigs("AccountUrl");
}
<div id="focus">
<ul>
@foreach (var item in focusList)
{
<li><a target="_blank" href="@(item.AdLink)">
<img src="@(AccountUrl)/@(item.AdImage)" alt="@(item.AdImageAlt)" title="@item.AdName" width="190" height="70" /></a></li>
}
</ul>
</div>
图片轮播 js代码的更多相关文章
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- jQuery 图片轮播的代码分离
以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...
- javaScript实现图片滚动及一个普通图片轮播的代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
随机推荐
- ToolStrip控件在窗体没有焦点的情况下,需要单击二次才能够激发事件的解决办法
protected override void WndProc(ref Message m) { if (m.Msg == 0x210) { Control control = Control.Fro ...
- python--day2--基础数据类型与变量
笔者:QQ: 360212316 python控制语句 for循环语句示例: for i in range(10): print(i) for循环语句示例1: for i in range(10) ...
- Apache Server 添加虚拟主机(Virtual Host )
当前许多虚拟服务器如阿里云的ECS服务器,都提供各式各样的虚拟机,常见的有Linux.Windows等,如果我们使用了Apache Server作为虚拟机的Web服务器,并且我们希望多个web应用程序 ...
- HashMap、HashTable、LinkedHashMap和TreeMap用法和区别
Java为数据结构中的映射定义了一个接口java.util.Map,它有四个实现类,分别是HashMap.HashTable.LinkedHashMap和TreeMap.本节实例主要介绍这4中实例的用 ...
- (转载)iOS 极光推送SDK 集成指南
iOS SDK 集成指南 使用提示 本文匹配的 SDK版本:r1.2.5 以后. 查看最近更新了解最新的SDK更新情况. 产品功能说明 极光推送(JPush)是一个端到端的推送服务,使得服务器端消息能 ...
- 搭建angular2环境(1)
1.安装node(windows环境) 进入node官网https://nodejs.org/en/下载好后直接安装就可以了.安装完成之后可以在命令窗口查看安装的版本 2.安装npm express ...
- OpenLDAP双主
1:主A服务器 然后重新生成配置文件数据 主B服务器 注意:两个主服务器的rid必须得一样 在做主从的时候,必须得安装必要的软件包,comp ...
- TCP、UDP、IP 协议分析(转)
http://blog.chinaunix.net/uid-26833883-id-3627644.html
- TimeQuest学习
1.物理时钟特性:clock skew(时钟差),jitter(拉动),clock latency(时钟潜伏),这些物理时钟特性又称为uncertainl--非定性,或非理想性. clock skew ...
- Light OJ 1032 - Fast Bit Calculations(数学)
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1032 题目大意:一个十进制数变化为二进制,那么对于这个数,如果连着两个二进制位 ...