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

  1. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  2. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

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

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

  4. jQuery 图片轮播的代码分离

    以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...

  5. javaScript实现图片滚动及一个普通图片轮播的代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  7. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

随机推荐

  1. 跨过几个坑,终于完成了我的第一个Xamarin Android App!

    时间过得真快,距离上次发随笔又是一年多.作为上次发的我的第一个WP8.1应用总结的后继,这次同样的主要功能,改为实现安卓版APP.前几个月巨硬收购Xamarin,把Xamarin集成到VS里了,大大方 ...

  2. Runtime初学习

    什么是runtime? runtime是一套纯c的API.平时用oc写的代码在运行时都会先转成runtime代码,然后在执行. runtime可以干什么? 1.交换方法.(method_exchang ...

  3. C#连接Sql Serve数据库及增,删,改操作

    一:连接. string sqlconn = "server=主机名;database=数据名;integrated security=true" //integrated sec ...

  4. [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

    在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...

  5. 把HBITMAP 保存图片文件.

    //VC下把HBITMAP保存为bmp图片 BOOL CtestBitMapDlg::SaveBmp(HBITMAP hBitmap, CString FileName) { HDC hDC; //当 ...

  6. chVsprintf

    #if LINUX_SYSTEM int chVsprintf(LPSTR buffer, int nCount, LPCSTR format, va_list argptr) { return vs ...

  7. Asp.net GridView控件使用纪要

    1:数据绑定 GridView 支持数据绑定的数据源格式比较多,例如可以使用ObjectDataSource绑定数据源, Dataset,datatable,List<T>等 2:列绑定 ...

  8. JavaWeb 学习009-4个页面,5条sql语句(添加、查看、修改、删除)

    ===========++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++==+++++++++ 2016-12-3------ ...

  9. 在ubuntu 16.04系统环境中搭建NAS(samba/iscsi/nfs)

    在ubuntu 16.04系统中搭建NAS环境 一.基本配置1:设置静态IPvi /etc/network/interfaces#iface ens32 inet dhcpiface ens32 in ...

  10. 对Hadoop体系的一点认识

    前言:Hadoop体系核心大多源自Google的思想,里面的思想的确很精彩!比如分布式计算,云的思想等,比起其他简单技术,更使得我想写这文章, 虽然这个东东在一般公司不可能用到! 首先由于hadoop ...