JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片

最新推荐文章于 2021-06-16 18:17:41 发布
最新推荐文章于 2021-06-16 18:17:41 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： JavaScript Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hepeng_8/article/details/9745851
版权

最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下：

先展示下效果把：


index.html 页面展示代码

<!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></title>
<LINK href="css/css.css" rel="stylesheet" type="text/css"> </LINK>
<SCRIPT language="JavaScript" src="js/16sucai.js"></SCRIPT>
<script type="text/javascript">


</script>
</head>

<body>

<DIV id="box">
<PRE class="prev" style="display: none;">prev</PRE>
<PRE class="next" style="display: none;">next</PRE>
<UL>
  <LI><IMG name='1' src="images/main_right_p.jpg">
  <DIV >
  <P>小乔，三国时期的主要女性人物之一。在三国时归属吴国，国色流离、资貌绝伦，是当时有名的东吴美女。</P></DIV></LI>
  <LI><IMG  name='2' src="images/main_right_p.jpg">
  <DIV>
  <P>潘安，西晋文学家，本名潘岳。中国古代最著名的美男子之首、"金谷二十四友"之首。</P></DIV></LI>
  <LI><IMG  name='3' src="images/main_right_p.jpg">
  <DIV>
  <P>朱元璋，明王朝的开国皇帝，建立了全国统一的封建政权。</P></DIV></LI>
  <LI><IMG name='4' src="images/main_right_p.jpg">
  <DIV >
  <P>吕雉，西汉开国皇帝高祖刘邦的原配夫人，中国历史上第一位掌权的女性统治者。</P></DIV></LI>
  <LI><IMG name='5' src="images/main_right_p.jpg">
  <DIV >
  <P>诸葛亮，蜀汉丞相，三国时期杰出的政治家、战略家、发明家、军事家。</P></DIV></LI>  
 </UL>
 <div class='numbutdiv'>
 	<div class='ndv'>
 		<label name='numBut' id='0'></label>
 		<label name='numBut' id='1'></label>
 		<label name='numBut' id='2'></label>
 		<label name='numBut' id='3'></label>
 		<label name='numBut' id='4'></label>
 	</div>	
 
 </div>
 </DIV>

</body>
</html>


接下来是对应的JS文件内容:

//var tempi=0; 
function ZoomPic ()
{
	this.initialize.apply(this, arguments);
}
ZoomPic.prototype = 
{
	initialize : function (id)
	{
		var _this = this;
		this.wrap = typeof id === "string" ? document.getElementById(id) : id;
		this.oUl = this.wrap.getElementsByTagName("ul")[0];
		this.aLi = this.wrap.getElementsByTagName("li");
		this.spans = this.wrap.getElementsByTagName("label");
		this.prev = this.wrap.getElementsByTagName("pre")[0];
		this.next = this.wrap.getElementsByTagName("pre")[1];
		this.timer = null;
		this.aSort = [];
		this.aSpan = [];
		this.iCenter = 2;
		this._doPrev = function () {return _this.doPrev.apply(_this)};
		this._doNext = function () {return _this.doNext.apply(_this)};
		this.options = [
			{width:50, height:212, top:55, left:0, zIndex:1},
			{width:90, height:252, top:35, left:50, zIndex:2},
			{width:400, height:292, top:10, left:140, zIndex:3},
			{width:90, height:252, top:35, left:540, zIndex:2},
			{width:50, height:212, top:55, left:630, zIndex:1}
		];
		for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
		for (var i = 0; i < this.spans.length; i++) this.aSpan[i] = this.spans[i];
		this.aSort.unshift(this.aSort.pop());
		this.setUp();
		this.addEvent(this.prev, "click", this._doPrev);
		this.addEvent(this.next, "click", this._doNext);
		this.doImgClick();
		this.dospansClick();
		this.timer = setInterval(function ()
		{
			_this.doNext()	
		}, 3000);		
		this.wrap.onmouseover = function ()
		{
			clearInterval(_this.timer)	
		};
		this.wrap.onmouseout = function ()
		{
			_this.timer = setInterval(function ()
			{
				_this.doNext()	
			}, 3000);	
		}
	},
	doPrev : function ()
	{
		this.aSort.unshift(this.aSort.pop());//删除数组最后一项，并且返回数组 获取最后一位
		this.setUp()
	},
	doNext : function ()
	{
		this.aSort.push(this.aSort.shift());//删除数组第一项，并且返回数组  删除第一位，然后把第一位push到最后一个上面
		this.setUp()
	},
	doImgClick : function ()
	{
		var _this = this;
		for (var i = 0; i < this.aSort.length; i++)
		{
			this.aSort[i].onclick = function ()
			{ //alert(this.index);
				if (this.index > _this.iCenter)
				{
					for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
					_this.setUp()
				}
				else if(this.index < _this.iCenter)
				{
					for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
					_this.setUp()
				}
			}
		}
	},dospansClick:function(){
		var _this = this;
		for (var i = 0; i < this.aSpan.length; i++)
		{
			this.aSpan[i].onclick = function ()
			{
				//alert(this.id);
				//alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name);//获取到当前是第几个在中间
				var cruuNum=_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name;
//				if (this.id > _this.iCenter)
//				{
//					for (var i = 0; i < this.id - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());//取 
//					_this.setUp()
				//alert(this.id+'...'+cruuNum);
				if(this.id-cruuNum>0){
					for (var i = 0; i < this.id-cruuNum; i++) _this.aSort.push(_this.aSort.shift());//取 
					_this.setUp()
				}else{
					//if(cruuNum==5){
						//if(this.id-cruuNum>0){
							for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.unshift(_this.aSort.pop());//取 
							_this.setUp();
						//}
						
					//}
				}
//				else{
//					for (var i = 0; i < -(this.id-cruuNum); i++) _this.aSort.push(_this.aSort.shift());//取 
//					_this.setUp()
//					
//				}
				
					
				
				
//				}
//				else if(this.id < _this.iCenter)
//				{
//					for (var i = 0; i < _this.iCenter - this.id; i++) _this.aSort.unshift(_this.aSort.pop());
//					_this.setUp()
//				}
				
//				for (var i = 0; i <5; i++){ 
//					_this.aSort.push(_this.aSort.shift());//取第一个
//					alert(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name+'aaa'+this.id);
//					if(_this.aSort[_this.iCenter].getElementsByTagName('img')[0].name==(this.id+1)){
//						_this.setUp()
//						break;
//					}
//				}
				
			}
		}
	},
	setUp : function ()
	{
		var _this = this;
		var i = 0;
		for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);//gebytagui0
		for (i = 0; i < this.aSort.length; i++)
		{
			this.aSort[i].index = i;
			//控制浮动层
			if (i < 5)
			{
				
				this.css(this.aSort[i], "display", "block");
				this.doMove(this.aSort[i], this.options[i], function ()
				{
					_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
					{
						_this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
						{
							_this.aSort[_this.iCenter].onmouseover = function ()//鼠标放上去
							{
								_this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
							};
							_this.aSort[_this.iCenter].onmouseout = function ()
							{
								_this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
							}
						})
					})
				});
			}
			else
			{
				this.css(this.aSort[i], "display", "none");
				this.css(this.aSort[i], "width", 0);
				this.css(this.aSort[i], "height", 0);
				this.css(this.aSort[i], "top", 37);
				this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
			}
			if (i < this.iCenter || i > this.iCenter)//
			{
				this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 30)
				this.aSort[i].onmouseover = function ()
				{
					_this.doMove(this.getElementsByTagName("img")[0], {opacity:100})	
				};
				this.aSort[i].onmouseout = function ()
				{
					_this.doMove(this.getElementsByTagName("img")[0], {opacity:35})
				};
				this.aSort[i].onmouseout();
			}
			else
			{
				//中间 一直是2
				//alert(this.aSort[i].text);//取消变亮事件
				//alert(this.aSort[i].getElementsByTagName("img")[0].name);
				//变换颜色
				var ttSe=this.aSort[i].getElementsByTagName("img")[0].name;
				var numbuts= document.getElementsByName('numBut');
				//alert(numbuts.length);
				
				for(var t=0;t<numbuts.length;t++){
					if(t==0){
						if(ttSe==5){
							numbuts[t].className ='numbutLeftCen';
						}else
						numbuts[t].className ='numbutLeft';
					}else if(t==ttSe){
						numbuts[t].className ='numbutCen';
					}else if(t==numbuts.length){
						//alert(t);
						numbuts[0].className ='numbutCen';
					}else{
						//全部修改class
						numbuts[t].className='numbut';
					}
					//var aObj = document.getElementById("a的ID");
					//添加事件
					//alert(tempi);
//					if(tempi==0){//alert(tempi);
//						if (window.addEventListener) {//Mozilla系列
//							numbuts[t].addEventListener('click', _this.addClick(t+1), false);
//						} else if (window.attachEvent) {//IE
//							numbuts[t].attachEvent('onclick', this.addClick(t+1));
//						}
//					}
				}
				//tempi++;
				this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
			}
		}		
	},addEvent : function (oElement, sEventType, fnHandler)
	{
		return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
	},
	css : function (oElement, attr, value)
	{
		if (arguments.length == 2)
		{
			return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
		}
		else if (arguments.length == 3)
		{
			switch (attr)
			{
				case "width":
				case "height":
				case "top":
				case "left":
				case "bottom":
					oElement.style[attr] = value + "px";
					break;
				case "opacity" :
					oElement.style.filter = "alpha(opacity=" + value + ")";
					oElement.style.opacity = value / 100;
					break;
				default :
					oElement.style[attr] = value;
					break
			}	
		}
	},
	doMove : function (oElement, oAttr, fnCallBack)
	{
		var _this = this;
		clearInterval(oElement.timer);
		oElement.timer = setInterval(function ()
		{
			var bStop = true;
			for (var property in oAttr)
			{
				var iCur = parseFloat(_this.css(oElement, property));
				property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
				var iSpeed = (oAttr[property] - iCur) / 5;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				
				if (iCur != oAttr[property])
				{
					bStop = false;
					_this.css(oElement, property, iCur + iSpeed)
				}
			}
			if (bStop)
			{
				clearInterval(oElement.timer);
				fnCallBack && fnCallBack.apply(_this, arguments)	
			}
		}, 30)
	},addClick:function (num){
		//alert(num);
//		if (this.index > _this.iCenter)
//		{
//			for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
//			_this.setUp()
//		}
	}
};
window.onload = function ()
{
	new ZoomPic("box");

};
function tt(){
	//alert(1);
	
}

OK，最后加上一些样式上的东西,就可以跑起来了； 

body {
	margin: 0px; padding: 0px;
}
div {
	margin: 0px; padding: 0px;
}
ul {
	margin: 0px; padding: 0px;
}
li {
	margin: 0px; padding: 0px;
}
h4 {
	margin: 0px; padding: 0px;
}
p {
	margin: 0px; padding: 0px;
}
body {
	 no-repeat 50% 0px rgb(0, 0, 0); font: 12px/1.8 arial; color: rgb(255, 255, 255); font-size-adjust: none; font-stretch: normal;
}
a {
	background: rgb(102, 102, 102); padding: 2px 5px; color: rgb(255, 255, 255); text-decoration: none;
}
a:hover {
	background: rgb(255, 153, 0);
}
#box {
	margin: 1px auto 0px; width: 680px; height: 320px; position: relative;
}
#box ul {
	width: 680px; height: 320px; position: relative;
}
#box li {
	background: rgb(0, 0, 0); list-style: none; border-radius: 3px; border:0px solid rgb(0, 0, 0); left: 377px; top: 146px; width: 0px; height: 0px; overflow: hidden; position: absolute; z-index: 0; cursor: pointer;
}

#box li div {
	background: rgb(0, 0, 0); width: 100%; height:40px; bottom: -100px; position: absolute; opacity: 0.7;
}
#box li div h4 {
	font: 12px/24px arial; margin: 0px 10px; border-bottom-color: rgb(51, 51, 51); border-bottom-width: 1px; border-bottom-style: solid; font-size-adjust: none; font-stretch: normal;
}
#box li div h4 span {
	color: red; margin-left: 10px;
}
#box li div p {
	margin: 5px 10px 0px; text-indent: 2em;
}
.numbutLeft{width: 15px; height: 5px; background-color:#AFB7B6; float: left; cursor: pointer;}
.numbut{width: 15px; height: 5px; background-color:#AFB7B6; float: left; margin-left: 5px; cursor: pointer;}
.numbutCen{width: 15px; height: 5px; background-color:#FF0000; float: left; margin-left: 5px; cursor: pointer;}
.numbutLeftCen{width: 15px; height: 5px; background-color:#FF0000; float: left; cursor: pointer;}
.numbutdiv{height: 10px;width: 100%;color: red;margin-top: 0px; padding-top: 0px}
.ndv{height: 10px;width: 95px; margin: 0 auto}
#box .next {
	background-position: -39px 0px; right: -60px;
}
#copyright {
	text-align: center; padding-top: 10px;
}
OOOOOKKK 了,奇特的效果就要出来了 ,还有一些不完美的地方,懒得去改了,有高手可以改改看,但希望分享哦。

效果如下:



hepeng_8
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ZoomPic:在鼠标悬停时缩放图像的 Jquery 插件
07-05
放大图片 在鼠标悬停时缩放图像的 Jquery 插件。
关于ZoomPic图片旋转木马插件图片抖动的解决办法
老蔡学代码
11-22 1436
其实非常简单，被大家想复杂了。 只需要注意两点： 1：图片尺寸和JS中定义的尺寸数值要一致 2：JS中的zindex参数不要重复。 因为我这个菜鸟填重复了就抖动的厉害。按顺序填不重复的zIndex数值就OK了。 2019-02-27日注：数值中不要有.5小数！！！！，有时候我们为了定位美观，用计算器得出高度除以2不能整除，一旦使用top:22.5这样的小数，也会导致抖动！！！取整数...
ZoomPic.js多图3D旋转图片轮播效果
11-12
ZoomPic.js多图3D旋转图片轮播效果
js实现图片3D轮播效果（收藏）
红岸基地
04-19 5911
3D的图片轮播效果很炫，写到这里只是为了不丢代码，不为别的。效果预览：html代码：&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;js实现3D图片逐张轮播幻灯片&lt;/title&gt; &lt;/head&gt; &lt;
php幻灯片轮播,jQuery实现旋转幻灯片轮播效果（附代码）
weixin_33453726的博客
03-13 139
这次给大家带来jQuery实现旋转幻灯片轮播效果(附代码)，jQuery实现旋转幻灯片轮播效果的注意事项有哪些，下面就是实战案例，一起来看一下。特点响应式——适应任何视窗的宽度混合内容不需要CSS轻量级(< 8 kb未压缩)基于jQuery构建集成图像预加载回调函数——onConstruct onStart,onEnd多个可配置选项延迟加载图片自动旋转容易扩展jquery实例：anoSlid...
jQuery平滑旋转幻灯片特效代码分享
10-23
主要介绍了jQuery平滑旋转幻灯片特效，一个具有自己特色的幻灯片会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的幻灯片，感兴趣的小伙伴可以参考下。
jQuery平滑旋转幻灯片特效代码源码下载
11-17
jQuery平滑旋转幻灯片特效代码源码下载
jquery平滑弹出幻灯片特效代码
03-20
jQuery平滑旋转幻灯片代码图片大小和颜色可自定义.zip
11-18
jQuery平滑旋转幻灯片代码图片大小和颜色可自定义.zip
全屏幻灯片轮播图 基于jquery打造的平滑滚动特效.rar
07-10
一款由jquery打造的左右图片滑动式图片滑动特效，适合当前主流的宽屏图片焦点图特效，可适用于企业网站、博客网站等使用，十分大气简洁。右下角左右箭头可手动控制图片切换。兼容性也很不错，在IE11、火狐和Chrome下...
jQuery平滑旋转幻灯片代码
12-11
jQuery平滑旋转幻灯片代码，效果超酷，图片大小和颜色自定义请修改jQuery-jcImgScroll.js
js图片轮换效果
u010433173的专栏
04-29 1076
html代码： http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> js焦点图片层叠轮播切换滚动 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font
html5 bingo制作,GitHub - BingoBingo/iSlider: Smooth mobile touch slider for Mobile WebApp, HTML5 App, ...
weixin_42299427的博客
06-16 211
iSlideriSlider is a light-weight, high performance, dependency free, yet cross-platform plugin.It can help handling most sliding effects, offering dozens of transition animation, and presenting variou...
ImageZoom 图片放大效果
weixin_33709219的博客
04-01 166
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。 一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。 好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。 前一阵子看到sohighthesky的图片放大效果，心血来潮自己也写一个看看。 这个程序有以下特点： 1，支持使用原图放大或新图片设置大图； 2，大图完成载入前使...
移动端图片轮播、滑动、放大等功能的插件-iSlider
harmsworth的博客
05-18 4685
iSlider 使用环境 最简单的使用方式 效果如下： 参考 iSlider 今天要介绍的插件是具有丰富功能的移动端插件-iSlider。iSlider是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。 使用环境 vue2.5 iSlider 三张用于滑动的图片 最简单的使用方式 ...
JQUERY3D图片切换
tomyjohn的专栏
10-09 2026
在做一个项目时，客户要求有一个3D切换效果
图像缩放算法
qq_34888036的博客
07-02 5273
缩放原理和公式图示: 缩放后图片 原图片 (宽DW,高DH) (宽SW,高SH) (Sx-0)/(SW-0)=(Dx-0)/(DW-0) (Sy-0)/(SH-0)=(Dy-0)/(DH-0) =&gt; Sx=Dx*SW/DW Sy=Dy*SH/DH 每一行的缩放比例是固定的;那么可以...
HTML5视频自动循环播放
热门推荐
lakelise的专栏
07-23 2万+
HTML5视频自动循环播放 默认打开页面，自动播放视频，按钮可控制视频的播放和停止 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5视频自动循环播放</title> </head> <bod...
纯css实现幻灯片轮播效果
u012637258的博客
12-14 2296
CSS实现简单的幻灯片效果             img {             display: none;             width: 600px;             height: 600px;         }         input:checked + img {             display: block;
html幻灯片自动播放
最新发布
11-12
以下是一个简单的HTML幻灯片自动播放的例子，使用了jQuery库实现： ```html <!DOCTYPE html> 自动播放幻灯片 /* 设置幻灯片容器的样式 */ #slideshow { position: relative; width: 500px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值