您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery焦点图幻灯片特效 > 正文

163网易图片新闻jQuery幻灯片效果

2014-12-04 10:12:32 作者:天外飞仙 人气:2339 Views

163网易图片新闻jQuery幻灯片效果
20141204091624
部分js代码

<script type="text/javascript"> //缩略图滚动事件 $(".jCarouselLite").jCarouselLite({ btnNext: "#btnNext", btnPrev: "#btnPrev", scroll: 1, speed: 240, circular: false, visible: 6 });</script><script type="text/javascript"> var currentImage; var currentIndex = -1; //显示大图(参数index从0开始计数) function showImage(index) { //更新当前图片页码 $(".CounterCurrent").html(index + 1); //隐藏或显示向左向右鼠标手势 var len = $('#OriginalPic img').length; if (index == len - 1) { $("#aNext").hide(); } else { $("#aNext").show(); } if (index == 0) { $("#aPrev").hide(); } else { $("#aPrev").show(); } //显示大图 if (index < $('#OriginalPic img').length) { var indexImage = $('#OriginalPic p')[index]; //隐藏当前的图 if (currentImage) { if (currentImage != indexImage) { $(currentImage).css('z-index', 2); $(currentImage).fadeOut(0, function() { $(this).css({ 'display': 'none', 'z-index': 1 }) }); } } //显示用户选择的图 $(indexImage).show().css({ 'opacity': 0.4 }); $(indexImage).animate({ opacity: 1 }, { duration: 200 }); //更新变量 currentImage = indexImage; currentIndex = index; //移除并添加高亮 $('#ThumbPic img').removeClass('active'); $($('#ThumbPic img')[index]).addClass('active'); //设置向左向右鼠标手势区域的高度 //var tempHeight = $($('#OriginalPic img')[index]).height(); //$('#aPrev').height(tempHeight); //$('#aNext').height(tempHeight); } } //下一张 function ShowNext() { var len = $('#OriginalPic img').length; var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; showImage(next); } //上一张 function ShowPrep() { var len = $('#OriginalPic img').length; var next = currentIndex == 0 ? (len - 1) : currentIndex - 1; showImage(next); } //下一张事件 $("#aNext").click(function() { ShowNext(); if ($(".active").position().left >= 144 * 5) { $("#btnNext").click(); } }); //上一张事件 $("#aPrev").click(function() { ShowPrep(); if ($(".active").position().left <= 144 * 5) { $("#btnPrev").click(); } }); //初始化事件 $(".OriginalPicBorder").ready(function() { ShowNext(); //绑定缩略图点击事件 $('#ThumbPic li').bind('click', function(e) { var count = $(this).attr('rel'); showImage(parseInt(count) - 1); }); });</script>

下载地址
预览地址

链接:http://www.jqueryba.com/4505.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!