图片轮播 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 ...
随机推荐
- 跨过几个坑,终于完成了我的第一个Xamarin Android App!
时间过得真快,距离上次发随笔又是一年多.作为上次发的我的第一个WP8.1应用总结的后继,这次同样的主要功能,改为实现安卓版APP.前几个月巨硬收购Xamarin,把Xamarin集成到VS里了,大大方 ...
- Runtime初学习
什么是runtime? runtime是一套纯c的API.平时用oc写的代码在运行时都会先转成runtime代码,然后在执行. runtime可以干什么? 1.交换方法.(method_exchang ...
- C#连接Sql Serve数据库及增,删,改操作
一:连接. string sqlconn = "server=主机名;database=数据名;integrated security=true" //integrated sec ...
- [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...
- 把HBITMAP 保存图片文件.
//VC下把HBITMAP保存为bmp图片 BOOL CtestBitMapDlg::SaveBmp(HBITMAP hBitmap, CString FileName) { HDC hDC; //当 ...
- chVsprintf
#if LINUX_SYSTEM int chVsprintf(LPSTR buffer, int nCount, LPCSTR format, va_list argptr) { return vs ...
- Asp.net GridView控件使用纪要
1:数据绑定 GridView 支持数据绑定的数据源格式比较多,例如可以使用ObjectDataSource绑定数据源, Dataset,datatable,List<T>等 2:列绑定 ...
- JavaWeb 学习009-4个页面,5条sql语句(添加、查看、修改、删除)
===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++==+++++++++ 2016-12-3------ ...
- 在ubuntu 16.04系统环境中搭建NAS(samba/iscsi/nfs)
在ubuntu 16.04系统中搭建NAS环境 一.基本配置1:设置静态IPvi /etc/network/interfaces#iface ens32 inet dhcpiface ens32 in ...
- 对Hadoop体系的一点认识
前言:Hadoop体系核心大多源自Google的思想,里面的思想的确很精彩!比如分布式计算,云的思想等,比起其他简单技术,更使得我想写这文章, 虽然这个东东在一般公司不可能用到! 首先由于hadoop ...