<!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>
相关推荐
总结来说，“仿百度图片展示js效果”是一个综合性的前端项目，它涵盖了前端开发的多个方面，包括DOM操作、事件处理、动画制作、性能优化等。通过这个项目，开发者不仅可以提升JavaScript技能，还能对响应式设计和...
7. **10种图片展示效果**：这个可能是一个综合性的项目，包含了上述提到的各种效果，也可能包含更多的创新展示方式，如3D旋转、缩放、滑动等。实现这些效果通常需要深入理解JavaScript DOM操作、动画制作和事件处理...
总的来说，"图片展示效果（逐渐放大缩小）"是一个涉及前端开发中动画处理、用户交互和视觉设计的综合技术。它要求开发者熟练掌握JavaScript、CSS以及HTML的相关知识，同时理解用户体验设计的原则，才能有效地实现并...
以上技术点的综合运用，可以打造出“超酷超绚”的图片展示效果。通过阅读和分析"超酷超绚精美图片展示效果代码"，我们可以学习到如何巧妙地结合JavaScript、CSS3和HTML，以实现令人惊叹的视觉效果。在实践中不断尝试...
标题中的“19个图片展示效果 超级漂亮 有创意”暗示了这是一个关于图像设计和用户体验的专题，可能包含一系列创新且视觉效果出众的图片展示方式。这些展示效果可能涉及网页设计、数据可视化、产品展示等多个领域，...
在IT行业中，JavaScript（简称JS）是一种广泛应用于网页和网络应用开发的脚本语言，...通过深入研究和实践这些代码，开发者可以掌握创建动态、吸引人的图片展示效果的技术，从而提升网站或应用的视觉吸引力和交互性。
在IT行业中，图片展示效果是网页设计和用户体验中不可或缺的一部分。"9款图片展示效果-绝对震撼"这个主题，显然聚焦于提供一系列令人惊叹的图片展示解决方案，利用JavaScript技术和CSS样式来增强用户对图片的浏览...
在IT行业中，尤其是在网页开发领域...而“对联广告”和“图片展示效果”则更具体地指向了广告设计和视觉呈现，是提升网站吸引力的重要手段。在实际应用中，开发者需要综合运用这些知识点，以实现高效且美观的图片展示。
标题中的“精品 图片展示效果swf+xml 带fla源文件 网站首页”揭示了这个压缩包文件包含的是一种用于网站设计的图片展示解决方案，它使用了SWF（Shockwave Flash）和XML两种技术。SWF是Adobe Flash Player支持的一种...
在Android开发中，微信图片展示效果的实现是一个常见的需求，涉及到多个技术点，包括图片加载库的使用、图片的缓存策略、滑动优化以及图片的裁剪与压缩等。以下将详细介绍这些关键知识点。 1. 图片加载库：在...
在IT行业中，滑动图片展示广告效果是一种常见的网页设计元素，尤其在电子商务、新闻...总体来说，实现滑动图片展示广告效果是一个涉及前端多方面技术的综合任务，需要结合JavaScript、CSS3以及良好的用户体验设计原则。
综合以上，这个项目是一个基于JavaScript的世界杯主题图片展示效果的实现，通过HTML、CSS和JS的结合，创建了一个具有交互性和视觉吸引力的图片相册，用户可以在网页上流畅地浏览和体验世界杯相关的精彩瞬间。...
总的来说，"Flash横向滚动带倒影的图片展示效果"是一个结合了Flash动画、ActionScript编程和HTML页面集成的综合技术应用。虽然现在Flash已经被HTML5等现代技术所取代，但这个案例仍然展示了早期网页设计中的创新和...
在ASP页面中，可以结合jQuery实现动态的图片展示效果，比如轮播图、滑动展示等。通过jQuery的animate函数可以创建平滑的图片滚动效果，而定时器（setTimeout或setInterval）则可以控制滚动的频率。 最后，安全性也...
通过以上这些技术的综合运用，我们可以创建出一个既美观又实用的图片展示效果，其中的“无限弹簧效果”可能是通过巧妙地变换图片位置和缩放比例，模拟出弹簧般的弹跳感，带给用户新颖的视觉体验。在实际编写代码时，...
这份专为作品展示和图片展示设计的HTML源码，将成为你打造个性化在线作品集的得力工具！ 在这个视觉为王的时代，一个高质量的在线作品集无疑是你简历中的一大亮点。这份源码提供了多种精美的布局和动画效果，让你的...
在IT行业中，全屏图片展示是一种常见的网页设计技术，它能够为用户提供沉浸式的视觉体验，尤其是在展示摄影、艺术作品或产品细节时效果尤为显著。这种技术通常涉及到HTML、CSS和JavaScript的综合应用，以实现图片的...
在这个"HTML5无限循环滚动图片展示"项目中，我们聚焦于HTML5的一个应用场景——创建一种具有3D效果的图片展示效果，这种效果能够无限循环地滚动图片。 首先，实现这种效果的关键在于HTML5的Canvas元素，这是一个...
综合以上信息，这个3D Flash图片展示项目是一个涉及高级AS3编程的实例，对于想提升Flash 3D编程技能的开发者来说，是个不错的学习资源。它可能涵盖的知识点包括： 1. ActionScript 3基础：变量、函数、类、事件处理...
综上所述，立体旋转图片展示是一个融合了前端开发、交互设计和3D图形处理的综合技术，涉及到了多种编程语言和工具的应用，为用户提供了一种独特的视觉体验。通过学习和实践，开发者可以提升自己的技能，并将这些技术...