导航:首页 > 编程语言 > js轮播加入动画效果

js轮播加入动画效果

 发布时间：2024-09-21 11:48:01

1. 如何用DW制作这种图片轮播的效果

这个是要css，结合js或者jq，才能做出来的。网络上都有现成的js代码，可以先学会css，然后自己去套用js代码就可以了。

2. 求教！！怎么用html的语言做出这种图片旋转轮播的效果！！100分高手快来！！

你把JS的代码复制到HTML页面的head部分，头尾加上<script>JS的内容</script>

3. 求 JS 大神，教教我图片轮播、、好心求解

要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left/top）或者内部图片容器的定位（marin-left/margin-top）来实现的。这里我以前者为例（向左滚动）：

通常的实现方式是：

1) 有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；

2) 包含图片的容器（此处称为“画轴”），尺寸很大，可以容纳下要滚动图片的阵列，定位方式为“absolute”；

3) 滚动即是调整此画轴的偏移量，此处示例为left；

4) 如果图片要看上去是连续滚动（到最后一幅时接着出现第一幅）的，那么可以重复第一幅图像到阵列的最末，然后当画轴滚动到此时，重置偏移量到第一幅。


有了上述DOM结构后，就可以通过JS来控制画轴的偏移量了，如果使用动画，可以参考一些成熟的动画库，示例只提供最基本的线性动画（即匀速移动）。


HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="viewPort">
<ul class="scroll" id="scroll">
<li><img src="img/scrollImage (0).jpg"></li>
<li><img src="img/scrollImage (1).jpg"></li>
<li><img src="img/scrollImage (2).jpg"></li>
<li><img src="img/scrollImage (3).jpg"></li>
<li><img src="img/scrollImage (4).jpg"></li>
<li><img src="img/scrollImage (0).jpg"></li>
</ul>
</div>
</body>
</html>

CSS：

.viewPort{
width: 168px;
height: 168px;
position: relative;
overflow: hidden;
border: solid 1px #666;
}
.viewPort .scroll{
width: 10000px;
height: 168px;
position: absolute;
left: 0;
list-style: none;
margin: 0;
padding: 0;
}
.viewPort .scroll li{
width: 168px;
height: 168px;
float: left;
}

JS：

var scroll = document.getElementById('scroll'); // 画轴
var scrollLeft = 0; // 记录画轴CSS left属性的值
var index = 0; // 当前显示的画的序号
// 滚动一幅画面，调整画轴scroll的left属性值。
function scrollByOne(){
var timer = setInterval(function(){
if (scrollLeft <= -168 * index) {
clearInterval(timer);
scrollLeft = -168 * index;
// 当滚动到最后一幅画面（与第一幅相同）时，重置。
if (index == 5) {
scrollLeft = 0;
scroll.style.left = Ɔ'
index = 0;
}
} else {
scrollLeft -= 2;
scroll.style.left = scrollLeft + 'px'
}
}, 10);
}
// 滚动，每隔3秒钟滚动一幅。
setInterval(function(){
++index;
scrollByOne();
}, 3000);

代码：

4. 请问用JS怎样做这个效果（点击下边的圆点转换图片）

使用Jquery类库，步骤：

1、准备好html：

<divclass="container">
		<divclass="item-list">
			<divclass="itemactive"><imgsrc="0.jpg"alt="第1张图"></div>
			<divclass="item"><imgsrc="1.jpg"alt="第2张图"></div>
			<divclass="item"><imgsrc="2.jpg"alt="第3张图"></div>
		</div>
		<divclass="item-control">
			<ahref='javascript:;'class="active">●</a>
			<ahref='javascript:;'>●</a>
			<ahref='javascript:;'>●</a>
		</div>
	</div>

2、为html设置样式

<style>
		.container{
			width:500px;
			height:300px;
			text-align:center;
			background:red;
			position:relative;
		}
		.container>.item-control{
			display:inline-block;
			width:100%;
			left:0;
			position:absolute;
			bottom:10px;
			background:rgba(0,0,0,0.2);
		}
		.container>.item-control>a{
			font-size:20px;
			color:rgba(255,255,255,0.7);
			text-decoration:none;
		}
		.container>.item-control>a.active{
			color:#fff;
		}
		.container>.item-list,
		.container>.item-list>.item{
			width:100%;
			height:100%;
		}
		.container>.item-list>.item{
			display:none;
		}
		.container>.item-list>.item.active{
			display:block;
		}
	</style>

3、编写Js

<script>
	(function(){
		$(document).on('click','.container.item-controla',function(){
			var_index=$(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.container.item-list.item').eq(_index).addClass('active').siblings().removeClass('active');
		})
	})()
	</script>

最终效果见图：

阅读全文

与js轮播加入动画效果相关的资料

热点内容
天下游旧版本 浏览：622
iphone6按键震动 浏览：528
u盘没有显示怎么打开文件夹 浏览：13
win7升级win10激活失败 浏览：914
win10系统文件缺失介质修复 浏览：900
怎么样系统升级 浏览：518
魔客吧传奇网站模板 浏览：365
一段代码解决html多浏览器兼容 浏览：803
淘车大师app官方下载 浏览：953
win10系统怎么能找回桌面文件 浏览：423
换主板怎么装驱动程序 浏览：563
宜搜小说旧版本 浏览：310
win10净网大师 浏览：262
苹果5s移动网络设置 浏览：680
主文件名的格式 浏览：336
如何找吃的app 浏览：11
js判断跳转前的页面地址 浏览：555
qq浏览器储存密码 浏览：309
网站字体阴影特效代码 浏览：187
g10刀轨铣内腔该如何编程 浏览：295

友情链接