欢迎指点!
先放上效果图:
鼠标移入界面后:
图片有点大,展示不全,可以到我的相册里看完整图。
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轮播图,功能算是比较全面了。博客文章中有介绍是如何实现的。
一般用来设置网站图片自动轮播一般用来设置网站图片自动轮播
轮播图,完全用JavaScript写的,没用到jQuery很适合js初学者学习
使用HTML+CSS+JavaScript实现轮播图效果,可以自动切换,有完整的点击事件。所有代码都有详细注释,适合初学者参考。
本例实现的是网页轮播图效果,采用原生JavaScript编写。可定时自动切换图片,拿到网站上可直接使用。轮播图的应用很常见的,前端学习必会的……
设计网页,利用Html、javascript相关知识编写网页轮播图,实现广告滚动展示。
用JavaScript写的图片切换代码,绝对实用!!
1.图片切换效果有以下几种:随机切换 4格纵向百叶窗 16格横向百叶窗 由里至外逐渐放大 中间向左右两边逐渐放大 中间向上下两边逐渐放大 由上至下落幕 由左至右 由左上至右下 由右下至左上 8格纵向百叶窗 8格纵向百叶...
运用javascript写轮播图简易版的运用javascript写轮播图简易版的
javascript实现轮播图效果,可以复用,特此分享。可以与html5和js一起使用。
janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现...
基于javascript开发的轮播图
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 运用定时器所写成的一个简单的轮播图,直接看代码,如下: 1.css代码 <style> *{ margin: 0; padding: 0; box-sizing:...
javaScript实现的轮播图
JavaScript图片轮播
这是一个HTML+CSS+JavaScript的轮播图,资源改编于网络资源,侵删。
使用第三方Swiper插件写的手机端的轮播效果图;使用第三方Swiper插件写的手机端的轮播效果图;
好用的Javascript图片轮播效果,方便,容易修改,兼容所有浏览器