欢迎指点！
先放上效果图：
鼠标移入界面后：
图片有点大，展示不全，可以到我的相册里看完整图。
http://hiuman.iteye.com/picture/136355
<body onselectstart="return false;" style="-moz-user-select:none;">
<div class="containner">
<span id="prev"><</span>
<span id="next">></span>
<div class="picGroup">
<img src="34.jpg">
<img src="106.jpg">
<img src="146.jpg">
</div>
<div class="titleGroup">
<p>标题1</p>
<p>标题2</p>
<p>标题3</p>
</div>
<ul class="btnGroup">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
*{margin: 0;padding: 0;}
li{list-style: none;}
body{background: #fff;}
#prev,#next{position: absolute;top: 0;font-size: 50px;font-weight: bold;color: DodgerBlue;z-index: 4;display: none;background: rgba(244,50,0,.1);height: 800px;width: 16%;line-height: 800px;text-align: center;cursor: pointer;}
#prev:hover,#next:hover{color: DarkTurquoise;}
#prev{left: 0;}
#next{right: 0;}
.containner{ position: relative;overflow: hidden;height: 800px; }
.picGroup{ position: absolute;top: 0;height: 5000px; }
.picGroup img{ display: block; }
.titleGroup{ width:100%;background:rgba(0,0,0,.2);position: absolute;top: 84%;/*left: 50%;*/ }
.titleGroup p{ display: none;text-align: center;line-height:36px; }
.titleGroup p:first-child{ display: block; }
.btnGroup{ position: absolute;top: 90%;left: 47.5%; }
.btnGroup li{width: 10px;height: 10px;margin: 4px;float: left;border: 1px solid red;background: #fff;cursor: pointer;}
.btnGroup li:first-child{background: red;}
var current=0;
var imgHeight=800;
//自动开始播放(从0开始)
var timer=setInterval('run()',2000);
function run(){
current=parseInt(current);
// alert('run'+current)
var topValue=document.getElementsByClassName('picGroup')[0].offsetTop;
var picLen=document.getElementsByClassName('picGroup')[0].children.length;
var max=(-1)*(picLen-1)*800;
if (topValue>max) {
current+=1;
}else if(topValue=max){
current=0;
}
document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
liChange();
titleChange();
}
// //鼠标移入移除的效果
var containner=document.getElementsByClassName('containner')[0];
var ctrlLeft=document.getElementById('prev');
var ctrlRight=document.getElementById('next');
containner.onmouseover=function(){
ctrlLeft.style.display='block';
ctrlRight.style.display='block';
}
containner.onmouseout=function(){
ctrlLeft.style.display='none';
ctrlRight.style.display='none';
}
ctrlLeft.onclick=function(){
clearInterval(timer);
//alert('left'+current)
if (current>=1) {
current-=1;
}else{
current=document.getElementsByClassName('picGroup')[0].children.length-1;
}
document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
//alert('left-'+current)
liChange();
titleChange();
timer=setInterval('run()',2000);
}
ctrlRight.onclick=function(){
clearInterval(timer)
//alert('right'+current)
if (current<document.getElementsByClassName('picGroup')[0].children.length-1) {
current+=1;
}else{
current=0;
}
document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
//alert('right+'+current)
liChange();
titleChange();
timer=setInterval('run()',2000);
}
//li的事件
function liChange(){
var aLi=document.getElementsByTagName('li');
var picLen=document.getElementsByClassName('picGroup')[0].children.length;
for(var i=0;i<picLen;i++){
if(i==current){
aLi[i].style.background="red";
}else{
aLi[i].style.background="#fff";
}
}
}
var aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].index=[i];
aLi[i].onclick=function(){
// alert(this.index)
var t=this.index;
current=t;
// alert('li'+current)
document.getElementsByClassName('picGroup')[0].style.top=(this.index)*(-1)*imgHeight+'px';
liChange();
titleChange();
}
}
//title
function titleChange(){
var title=document.getElementsByTagName('p');
var picLen=document.getElementsByClassName('picGroup')[0].children.length;
for(var i=0;i<picLen;i++){
if(i==current){
title[i].style.display="block";
}else{
title[i].style.display="none";
}
}
}
- 大小: 963.8 KB
- 大小: 983.6 KB
分享到：
相关推荐
javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图javaScript轮播图...
总的来说，一个全面的JavaScript轮播图不仅需要实现基本的图片切换功能，还要考虑到用户体验、可配置性以及兼容性等方面。这个手写的轮播图项目是一个很好的实践平台，可以帮助开发者巩固JavaScript基础知识，同时...
在实现JavaScript轮播图的过程中，主要涉及以下几个步骤： 1. **引入资源**：确保引入Swiper插件的CSS和JS文件。在`index.html`中，通常会在`<head>`部分引入CSS文件，而在`<body>`底部或者`<head>`中引入JS文件。...
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容并实现自动循环播放的效果，常用于广告宣传或者焦点图展示。本项目利用HTML、JavaScript技术实现了这一功能，下面将详细介绍其中的关键知识点。 1. ...
JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片并以循环或定时切换的方式呈现，为网站增添互动性和视觉吸引力。在本项目中，我们利用JavaScript配合SWF（ShockWave Flash）技术实现了一个灵活的图片...
JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片并以循环或定时切换的方式呈现，为网站增添互动性和视觉吸引力。在"好用的Javascript图片轮播"中，我们可以从标题和描述中提取出以下几个关键知识点：...
以上就是实现原生JavaScript轮播图的核心知识点。在实际应用中，还可以考虑增加触摸事件支持，优化性能，以及适配不同屏幕尺寸，以确保轮播图在各种设备上都能良好运行。熟练掌握这些技能将对前端开发者在网页交互...
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
**JavaScript轮播图实现详解** 在网页设计中，轮播图是一种常见的动态展示方式，用于在有限的空间内展示多张图片或内容。本教程将详细讲解如何使用纯JavaScript实现一个轮播图，这对于正在学习JavaScript的初学者来...
在本项目中，我们关注的是使用这三种技术实现的轮播图，这是一种常见的网页元素，用于展示多张图片或内容并以动态切换的方式进行展示。 HTML5作为网页的结构语言，主要负责构建轮播图的基础框架。在HTML中，通常会...
一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播
在前端开发中，轮播图是一种常见的网页元素，用于展示多张图片或内容，并通过自动切换来节省页面空间。本文将详细介绍如何使用HTML、CSS和JavaScript实现一个具有自动切换和点击事件功能的轮播图。 首先，我们从...
在前端开发中，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动切换的图片或内容。本资源包含纯JavaScript实现的三种不同类型的轮播图，这对于熟悉JavaScript和想要提升前端技能的开发者来说，是一份...
JavaScript 轮播图是一种常见的前端网页交互效果，它能够以自动或手动的方式展示一系列图片或其他内容，常用于网站的首页或产品展示区域。在这个项目中，通过HTML、CSS和JavaScript的结合，我们可以创建一个自定义的...
JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片并以自动或手动的方式进行切换，为用户带来良好的视觉体验。本示例通过原生JavaScript实现，避免了对jQuery等库的依赖，使得代码更加轻量化，更易于...
- 指示器更新：当图片切换时，相应地改变当前选中的导航点，以反映图片的位置。 5. **images 文件夹**： 这个文件夹可能包含了轮播图要用到的所有图片资源，确保它们与HTML文件引用的路径匹配。 6. **js 文件**...
轮播图通常包含多个滑块，每个滑块可以显示一张图片、一段文字或其他多媒体内容，用户可以通过点击按钮或自动滚动来切换内容。 在这个“ASP.NET写的轮播图代码页面”中，我们可以期待找到以下关键知识点： 1. **...
1.图片切换效果有以下几种：随机切换 4格纵向百叶窗 16格横向百叶窗 由里至外逐渐放大 中间向左右两边逐渐放大 中间向上下两边逐渐放大 由上至下落幕 由左至右 由左上至右下 由右下至左上 8格纵向百叶窗 8格纵向百叶...
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...