JS图片滚动效果，走马灯_走马灯的组装方法资源-CSDN文库

共13个文件

jpg：9个

js：1个

db：1个

5星 · 超过95%的资源需积分: 41 102 浏览量 2014-03-18 03:54:51 上传评论收藏 72KB RAR 举报

JavaScript（简称JS）是一种轻量级的编程语言，常用于网页和网络应用的开发，尤其在处理页面交互和动态效果方面表现出色。走马灯，也称为轮播图或幻灯片，是网页设计中常见的一种展示多张图片或内容的方式，通过自动切换或用户触发来实现动态展示。在网页设计中，JS实现的图片滚动效果可以增加用户体验，吸引用户注意力，同时节省网页空间。本项目提供两种不同的图片滚动效果，它们都是基于JS编写的，无需额外的服务器端语言支持，只需在HTML中嵌入相应的JS代码和图片资源即可。这种方案的优点在于它灵活、可定制性强，可以根据需求调整动画效果、切换速度、过渡类型等参数。我们来探讨第一种图片滚动效果。这种效果可能采用定时器（setInterval）配合CSS样式改变来实现。JS会定期更新图片的display属性，使得每张图片按照设定的时间间隔依次显示。为了平滑过渡，可以结合CSS3的transition属性，让图片在切换时产生淡入淡出或者滑动的效果。此外，用户还可以通过控制按钮或触控事件手动切换图片。第二种图片滚动效果可能引入了更复杂的技术，如滑动插件（例如Swiper.js或Slick.js）。这类插件通常提供了丰富的API和配置选项，可以实现更多高级特性，如无限循环、自动播放、分页指示器、触摸滑动等。使用插件可以大大简化开发过程，同时保持代码的组织性和可维护性。在项目中，你需要将这些插件的JS和CSS文件引入到HTML文件中，并按照文档配置相应的参数。为了实现这两种效果，你需要具备基本的HTML、CSS和JS知识。HTML用于布局和添加图片，CSS负责样式设置，而JS则用于实现动态交互。在实际应用中，你可能需要根据自己的网站设计进行适当的调整，例如修改图片大小、定位、边距等样式，以及调整JS中的切换时间和动画效果。在压缩包中的"图片滚动"文件夹中，你应该能找到以下内容： 1. HTML文件：包含HTML结构和内联JS代码，用于展示图片滚动效果。 2. CSS文件：定义图片和页面样式的文件。 3. JS文件：包含实现滚动效果的脚本，可能是纯JS编写或预封装的插件。 4. 图片资源：用于演示的图片文件。在实际使用时，你需要将这些文件上传到你的服务器或本地文件系统，然后在浏览器中打开HTML文件，查看并测试图片滚动效果。如果需要调整，可以直接在HTML、CSS或JS文件中修改代码，然后刷新页面查看结果。 JS图片滚动效果（走马灯）是网页设计中常用的一种技术，它可以提高网页的视觉吸引力和互动性。通过学习和理解这两种不同的实现方式，你可以更好地掌握JS在动态效果上的应用，为你的网站增添更多魅力。无论是自定义编写还是使用插件，都能帮助你实现高效、美观的图片滚动效果。

展开

资源推荐

资源详情

资源评论

收起资源包目录

.rar （13个子文件）

图片滚动

images

smallbb276cedeaeb0438ed3275a9711b1d69.jpg 4KB

small546ee4ae135fdeec7f6b0eb9a16b3440.jpg 5KB

smallee9241175b1e38b5df271a9f2f67034d.jpg 2KB

smallaa6d7f26f941d87728eb0716d36d9cbe.jpg 6KB

small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg 6KB

dotted.gif 90B

small6ae21c4c44285e9a58afd5c3f42ae36f.jpg 4KB

small93f0fbcca20b400dfab9522431cc9de0.jpg 6KB

Thumbs.db 36KB

small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg 4KB

smallf2a366c8954d666360c4b214940963cf.jpg 5KB

scrollver.js 8KB

demo.html 9KB

      <!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=utf-8" />
<title>javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;font-family:"",Verdana, Arial;line-height:100%;color:#5a5a5a;}
.warrper{margin:20px auto;border:solid 1px #ddd;height:167px;width:710px;}
h1,h2,h3,h4,h5,h6,p,select,td{margin:0;padding:0;font-size:12px;}
a{color:#5e5e5e;text-decoration:none;}
a:hover{color:#00a4eb;text-decoration:none;}
/* container */
#container{position:relative;height:160px;overflow:hidden;}
#container ul{overflow:hidden;clear:both;height:160px;}
#container li{float:left;text-align:center;padding:0;margin-left:27px;margin-top:7px;height:153px;display:inline;width:200px;}
#container li a{display:block;float:left;height:151px;}
#container li a img{width:128px;height:110px;padding:2px;border:1px solid #ddd;}
#container li a div{line-height:18px;width:200px;}
#container li a:hover img{border:solid 1px #00a4eb;}

/* jsfoot_scroll */
#jsfoot_scroll{width:232px;height:182px;overflow:hidden;border-left:dashed 1px #ddd;border-right:dashed 1px #ddd;border-top:dashed 1px #ddd;margin:0 auto;}
#jsfoot_scroll div{width:100%;height:64px;float:left;padding:13px 0 14px;font-weight:normal;background:url(images/dotted.gif) repeat-x bottom;}
#jsfoot_scroll div .img{width:94px;height:64px;float:left;}
#jsfoot_scroll div .img img{width:90px;height:60px;}
#jsfoot_scroll div dl{width:128px;height:64px;float:right;}
#jsfoot_scroll div dt{width:100%;float:left;line-height:22px;font-weight:bold;}
#jsfoot_scroll div dd{width:100%;float:left;line-height:21px;}
</style>
<script type="text/javascript" src="scrollver.js"></script><!--javascript 图片滚动插件-->
<script type="text/javascript">
function init_Scroll(){
     var scrollPics = new scrollVertical('container','message','ul');
         scrollPics.speed = 10; /* 调节speed值可以改变滚动间隙 */
         scrollPics.isPause = true;
 
     var timer_start = setTimeout(function(){clearTimeout(timer_start);scrollPics.isPause = false;},2000);

     Event.addEvent(scrollPics.scrollArea,"mouseover",function(){scrollPics.isPause = true;});
     Event.addEvent(scrollPics.scrollArea,"mouseout",function(){scrollPics.isPause = false;});
}
Event.addEvent(window,'load',init_Scroll);
</script>
</head>

<body>
<h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 支持单排图片上下无缝自动滚动 和 图片上下连续自动滚动</h2>
<div class="warrper">
	<div id="container">
		<div id="message">
			<ul>
				<li>
					<a title="javascript特效多功能选项卡自动切换内容图片延迟加载" href="http://www.17sucai.com/"><img width="150" height="150" alt="javascript特效多功能选项卡自动切换内容图片延迟加载" src="images/small546ee4ae135fdeec7f6b0eb9a16b3440.jpg" />
					<div>javascript特效多功能选项卡自动切换内容图片延迟加载</div></a>
				</li>
				<li>
					<a title="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" href="http://www.17sucai.com/"><img width="150" height="150" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="images/small93f0fbcca20b400dfab9522431cc9de0.jpg" />
					<div>jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</div></a>
				</li>
				<li>
					<a title="jquery特效制作 slide 图片窗帘式滚动" href="http://www.17sucai.com/"><img width="150" height="150" alt="jquery特效制作 slide 图片窗帘式滚动" src="images/smallbb276cedeaeb0438ed3275a9711b1d69.jpg" />
					<div>jquery特效制作 slide 图片窗帘式滚动 效果酷炫</div></a>
				</li>
			</ul>
			<ul>
				<li>
					<a title="用jquery特效制作一个简单的图像预览" href="http://www.17sucai.com/"><img width="150" height="150" alt="用jquery特效制作一个简单的图像预览" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" />
					<div>用jquery特效制作一个简单的图像预览</div></a>
				</li>
				<li>
					<a title="用jquery特效制作图片金字塔式放大缩小展示" href="http://www.17sucai.com/"><img width="150" height="150" alt="用jquery特效制作图片金字塔式放大缩小展示" src="images/smallaa6d7f26f941d87728eb0716d36d9cbe.jpg" />
					<div>用jquery特效制作图片金字塔式放大缩小展示</div></a>
				</li>
				<li>
					<a title="纯CSS下拉菜单" href="http://www.17sucai.com/"><img width="150" height="150" alt="纯CSS下拉菜单" src="images/smallee9241175b1e38b5df271a9f2f67034d.jpg" />
					<div>纯CSS下拉菜单导航特效兼容IE6和IE6+以上</div></a>
				</li>
			</ul>
		</div>	
	</div><!--container end-->
</div><!--warrper end-->



<h2 align="center" style="margin:20px 0;font-size:14px;">javascript 特效 图片内容滚动插件 图片单排上下连续自动滚动</h2>
<div id="jsfoot_scroll">

	<div>
		<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" src="images/smallf2a366c8954d666360c4b214940963cf.jpg" alt="用jquery特效制作一个简单的图像预览"></a></h4>
		<dl>
			<dt><a href="http://www.17sucai.com/">jquery 特效</a></dt>
			<dd><a href="http://www.17sucai.com/">用jquery特效制作一个简单的图像预览</a></dd>
		</dl>
	</div>
	
	<div>
		<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="javascript特效按钮控制图片左右自动滚动" src="images/small6ae21c4c44285e9a58afd5c3f42ae36f.jpg"></a></h4>
		<dl>
			<dt><a href="http://www.17sucai.com/">javascript 特效</a></dt>
			<dd><a href="http://www.17sucai.com/">javascript特效按钮控制图片左右自动滚动</a></dd>
		</dl>
	</div>
	
	<div>
		<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="用CSS3更换一个确认对话框的jQuery特效" src="images/small79b7ec4e3a48d1f0b125bcbd6bed0fb2.jpg"></a></h4>
		<dl>
			<dt><a href="http://www.17sucai.com/">css3 特效</a></dt>
			<dd><a href="http://www.17sucai.com/">用CSS3更换一个确认对话框的jQuery特效</a></dd>
		</dl>
	</div>
	
	<div>
		<h4 class="img"><a href="http://www.17sucai.com/"><img width="90" height="60" alt="旋转幻灯片使用jQuery和CSS3" src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a></h4>
		<dl>
			<dt><a href="http://www.17sucai.com/">html5 特效</a></dt>
			<dd><a href="http://www.17sucai.com/">旋转幻灯片使用jQuery和CSS3</a></dd>
		</dl>
	</div>
</div><!--jsfoot_scroll end-->

<script language="javascript">
var $ = function (d){
    typeof d == "string" &&(d = document.getElementById(d)); 
    return $.fn.call(d);
};
$.fn = function (){
	this.$ADD = function (fn){CLS.add(this,fn)};
	this.addEvent = function (sEventType,fnHandler){
		if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} 
	    else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} 
	    else {this["on" + sEventType] = fnHandler;}
	}
	this.removeEvent = function (sEventType,fnHandler){
		if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} 
	    else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} 
	    else { this["on" + sEventType] = null;}
	}
	return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);