<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
text-align:center;
}
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
#content{
margin:10px auto;
border:1px solid #999;
width:900px;
padding:15px;
}
#bigImg{
text-align:center;
}
#bImg{
width:500px;
height:350px;
}
#bigImg .btnContent{
padding:10px 0;
}
#btn2{
height:30px;
width:80px;
}
#smallImgs{
height:120px;
width:900px;
background-color:#CCC;
text-align:center;
position:relative;
}
.lBtn, .rBtn{
position:absolute;
font-size:24px;
font-weight:bold;
top:50px;
}
.lBtn{
left:10px;
}
.rBtn{
right:10px;
}
#smallContent{
width:840px;
height:90px;
margin-left:30px;
position:absolute;
top:20px;
overflow:hidden;
left:0;
}
#smallContent img{
border:3px solid #fff;
}
.smallUl{
position:absolute;
width:9999px;
left:0;
}
.smallUl li{
float:left;
margin-left:7px;
margin-right:7px;
}
#smallImgs .active{
border-color:#999;
}
</style>
</head>
<body>
<div id="content">
<div id="bigImg">
<div class="bigContent">
<img id="bImg" src="images/big_3.jpg" />
</div>
<div class="btnContent">
<input id="btn1" type="button" value=" 上一张 " />
<input id="btn2" type="button" value="自动播放" />
<input id="btn3" type="button" value=" 下一张 " />
</div>
</div>
<div id="smallImgs">
<a class="lBtn" href="javascript:void(0)"><</a>
<div id="smallContent">
<ul class="smallUl">
<li><img src="images/small_0.jpg" bigSrc="images/big_0.jpg" /></li>
<li><img src="images/small_1.jpg" bigSrc="images/big_1.jpg" /></li>
<li><img src="images/small_2.jpg" bigSrc="images/big_2.jpg" /></li>
<li><img class="active" src="images/small_3.jpg" bigSrc="images/big_3.jpg" /></li>
<li><img src="images/small_4.jpg" bigSrc="images/big_4.jpg" /></li>
<li><img src="images/small_5.jpg" bigSrc="images/big_5.jpg" /></li>
<li><img src="images/small_6.jpg" bigSrc="images/big_6.jpg" /></li>
<li><img src="images/small_7.jpg" bigSrc="images/big_7.jpg" /></li>
</ul>
</div>
<a class="rBtn" href="javascript:void(0)">></a>
</div>
</div>
<script>
/*
* 一个综合图片展示效果
* ie6,7,8，ff，opera中测试通过；
* ******made by keimon*********
* ********2013-01-30********
*/
$(function(){
var timer;
var html = $('.smallUl').html()
var i = $('.smallUl img').index($('.smallUl img.active')[0]); //注意此处不要遗忘[0]；
var sWidth = $('.smallUl li').eq(0).outerWidth(true);
var sLen = $('.smallUl li').length;
//自动播放图片；
function leftOneImg(){
leftImg()
timer = setTimeout(function(){leftOneImg()},2000);
}
//点击自动播放图片按钮；
$('#btn2').click(function(){
if($(this).val().indexOf('自动播放')!=-1){
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间；
$(this).val('停止播放');
leftOneImg();
}else if($(this).val().indexOf('停止播放')!=-1){
$(this).val('自动播放');
clearTimeout(timer);
}
})
//图片向左移动一个
function leftImg(){
if(i==11){
i=2;
}
if(parseInt($('.smallUl').css('left'))==-sWidth*sLen){
$('.smallUl').css('left',0);
}
$('.smallUl li img').removeClass('active').eq(i+1).addClass('active'); //使被选中图片边框变灰；
var bigSrc = $('.smallUl li img').eq(i+1).attr('bigSrc'); //改变大图片的url
$('#bImg').attr('src',bigSrc);
$('.smallUl').animate({'left':'-='+sWidth+'px'},'slow'); //小图片的left属性减少sWidth
i++;
}
//图片向右移动一位
function rightImg(){
if(i==2){
i=10;
}
if(parseInt($('.smallUl').css('left'))==0){
$('.smallUl').css('left',-sWidth*sLen+'px');
}
$('.smallUl li img').removeClass('active').eq(i-1).addClass('active'); //使被选中图片边框变灰；
var bigSrc = $('.smallUl li img').eq(i-1).attr('bigSrc');//改变大图片的url
$('#bImg').attr('src',bigSrc);
$('.smallUl').animate({'left':'+='+sWidth+'px'},'slow'); //小图片的left属性增加sWidth
i--;
}
//点击下一张按钮；
$('#btn3').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间;
leftImg();
}else{
return false;
}
})
//点击上一张按钮；
$('#btn1').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
if(i==3){
i=10;
}
$('.smallUl').html(html+html);
$('.smallUl').css('left',(3-i)*sWidth+'px');//获得开始自动播放时，使class=‘active’的img位于中间;
rightImg();
}else{
return false;
}
})
//向左移动7张图片；
function leftSevenImg(){
$('.smallUl').html(html);
var sWidth = $('.smallUl li').eq(0).outerWidth(true);
//var sLen = Math.ceil($('.smallUl li').length/7);
if(parseInt($('.smallUl').css('left'))>=0){
$('.smallUl').animate({'left':'-='+sWidth*7+'px'});
}
}
//向右移动7张图片；
function rightSevenImg(){
$('.smallUl').html(html);
var sWidth = $('.smallUl li').eq(0).outerWidth(true);
//var sLen = Math.ceil($('.smallUl li').length/7);
if(parseInt($('.smallUl').css('left'))<0){
$('.smallUl').animate({'left':'+='+sWidth*7+'px'});
}
}
//点击向左箭头
$('.lBtn').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
leftSevenImg();
}else{
return false;
}
})
//点击向右箭头
$('.rBtn').click(function(){
if($('#btn2').val().indexOf('自动播放')!=-1){
rightSevenImg();
}else{
return false;
}
})
})
</script>
</body>
</html>
相关推荐
非常酷的3D图片展示效果，可以综合起来加在网页当中，是一个门户个人企业站展示很好的选择！
这份专为作品展示和图片展示设计的HTML源码，将成为你打造个性化在线作品集的得力工具！ 在这个视觉为王的时代，一个高质量的在线作品集无疑是你简历中的一大亮点。这份源码提供了多种精美的布局和动画效果，让你的...
这是一个综合的图片展示程序，自我感觉效果还不错。但由于时间原因，代码未精简。只作参考。
TAB选项卡 图片滚动综合的购物网站商品列表分类展示效果，上边是一个TAB选项卡，下面是一个图片滚动的列表，上边点击后，与下边图片对应的分组图片全部滚动过来，之后可控制图片向左、向右滚动，从形式上来看，更...
这份专为作品展示和图片展示设计的HTML源码，将成为你打造个性化在线作品集的得力工具！ 在这个视觉为王的时代，一个高质量的在线作品集无疑是你简历中的一大亮点。这份源码提供了多种精美的布局和动画效果，让你的...
flash xml图片集查看效果，可作为图片展示来用哦，包含了完整的实例文件，结合了HTML JavaScript CSS技术以及XML综合实现了这款Flash相册，Flash动画内运用了滑动特效，整体效果流畅，用户体验不错。
jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 jquery异步加载图片的插件jqGalScroll下载 jquery微型相册插件Micro Image Gallery下载 jQuery把图片放大及变亮特效插件...
lQuery 仿京东商城产品展示切换及放大效果，放大功能参考了JQZOOM插件，本特效综合图片切换与图片放大两项技术于一身，非常适合于产品类、图片类网站使用，本特效运行效果可看上图。
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
3D图片动画效果
随着近年来信息系统迅猛发展，对... 在这篇文章里，我们为大家展示我们在四川一高标准机房的建设图片(安普综合配线部分)，并用文字简单向大家说明综合配线部分的安装过程。同时也简单叙述这样设计和安装的优势劣势。
仿新浪动感图片浏览器 SDPhotoBrowser ,SDPhotoBrowser 非常简单易用的图片浏览器，模仿微博图片浏览器动感效果，综合了图片展示...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38.jquery异步加载图片的插件jqGalScroll下载 39.jquery微型相册插件Micro Image Gallery下载 40.jQuery...
追梦A系列（11.0版本，以下11.0均简称为A）是针对企业网站定制设计的，模板采用全新AS3.0代码编辑，拥有更快的运行和加载速度，A系列模板主要针对图片展示，拥有简洁大气展示效果，并且可以自由扩展图片分类，同时还...
cookie等进行了综合应用，相信读者理解之后一定会对自己的javascript学习更进一步，本示例中涉及的大部分代码都在本页中贴出，部分代码资源未向读者展示，读者可以点击下面的资源链接，下载本示例的全部代码及图片...
36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery...
摘要:脚本资源,Ajax/JavaScript,图片切换,fancybox,图片放大 Portfolio Zoom Slider是一个集合了jQuery图片切换,图片放大,fancybox图片展示为一体的综合特效,其实还有图片滚动效果,比较多的ajax特效,由国外网站付费...
网页主题：G20 页面介绍： 1、首页（导航条、视频、滚动） 2、峰会介绍页面（图文混排） 3、近期峰会（表格） 4、精彩瞬间（鼠标经过展示图片） 5、会员注册（表单+js验证）