xml地图|网站地图|网站标签 [设为首页] [加入收藏]

【皇家88平台登录】一个基于jquery的图片切换效果

来源:http://www.ccidsi.com 作者:最新解决方案 人气:83 发布时间:2019-09-19
摘要:复制代码 代码如下: js文件 .warp{width:487px; height:194px; overflow:hidden;border:solid 1px#ccc;position:relative; top:0px; left:0px; background-color:#fafafa} .warp img{border-width:0px;cursor:pointer;position:relative; top:0px;l

复制代码 代码如下:

js文件

.warp{width:487px; height:194px; overflow:hidden;border:solid 1px #ccc;position:relative; top:0px; left:0px; background-color:#fafafa}
.warp img{border-width:0px;cursor:pointer;position:relative; top:0px; left:0px}
.imgBig{float:left; width:360px; height:190px;padding:2px;}
.imgLittle{float:right; width:108px; height:57px;padding:6px 5px 0 10px;clear:right}

复制代码 代码如下:

javascript:

复制代码 代码如下:

css代码:

$(function () {
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var btn = "<div class='btnBg'></div><div class='btn'>";
for (var i = 0; i < len; i ) {
btn = "<span></span>";
}
btn = "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity", 0);
$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity", 0.0).hover(function () {
$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
}, function () {
$(this).stop(true, false).animate({ "opacity": "0" }, 300);
});
$("#focus .pre").click(function () {
index -= 1;
if (index == -1) { index = len - 1; }
showPics(index);
});
$("#focus .next").click(function () {
index = 1;
if (index == len) { index = 0; }
showPics(index);
});
$("#focus ul").css("width", sWidth * (len));
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index ;
if (index == len) { index = 0; }
}, 2800);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index * sWidth;
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300);
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300);
}
});

上面包车型客车代码对于学习jquery的爱侣是个参照他事他说加以考察
皇家88平台登录 1
html代码:

复制代码 代码如下:

您恐怕感兴趣的小说:

  • jQuery切换网页皮肤并保存到Cookie示例代码
  • JQuery UI皮肤定制
  • JQuery给网页更改皮肤的艺术
  • jQuery无刷新切换主旨皮肤实例讲授
  • jQuery版Tab标签切换
  • jQuery轻便tab切换效果达成格局
  • jQuery达成选项卡切换效果简单演示
  • 依赖Jquery的简约图片切换效果
  • jQuery完结切换页面过渡动画效果
  • 基于jquery完成左右按键点击的图片切换效果
  • jQuery Cookie完成切换皮肤作用【附源码下载】

您大概感兴趣的篇章:

  • 依附JQuery的贯彻图片轮播效果(核心图)
  • jquery仿QQ市肆带左右开关调整难点图片切换滚动作效果应
  • jquery主旨图片切换(数字标明/手动/自动播放/横向滚动)
  • jQuery主题图切换特效插件封装实例
  • jQuery核心图切换简易插件制作进程全纪录
  • Jquery大旨图实例代码
  • Jquery 主旨图 用于图片呈现效果代码
  • jQuery插件达成带圆点的标准图片轮播切换
  • jQuery插件Elastislide完毕响应式的关键图无缝滚动切换特效
  • jquery picswitch图片大旨图体现效果
  • jQuery插件bxSlider实现响应式主旨图
  • jQuery落成的自适应难点图效果完全实例

$(document).ready(function(){
var $warp = $("#warp");
$warp.IsRunning = false;
var seconds = 500;
$warp.children("img").click(function(){
if($warp.IsRunning){return;}
$warp.IsRunning = true;
var $imgs = $("#warp").children("img");

<div class="bannerbox">
<div id="focus">
<ul>
<li><a href="" target="_blank">
<img src="../dandong.png" alt="" /></a></li>
<li><a href="" target="_blank">
<img src="../mohe.png" alt="" /></a></li>
<li><a href="" target="_blank">
<img src="../changbaishan.png" alt="" /></a></li>
<li><a href="" target="_blank">
<img src="../erlianhaote.png" alt="" /></a></li>
</ul>
</div>
</div>

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:【皇家88平台登录】一个基于jquery的图片切换效果

关键词: 68399皇家赌场

最火资讯