下载的单页html。搭配的css+js图片轮播不显示。求助

nonclg 2018-10-19 11:39:23 






<html>

<head>

	<meta charset="utf-8" />

	<title>我的小站</title>

	<link href="static/css/reset_css.css" rel="stylesheet" />

	<link href="static/css/all.css" rel="stylesheet" />

	<script src="static/js/jquery.js"></script>

    <script src="static/js/jqueryxslider.js"></script>

 

 </head>

<body>

	<!-- banner结束 -->

 

 

	<div id="NewsList">

		<ul class="NewsList">

	 

			<li>我的小站</li>

			<li>我的QQ </li>

			<li>我的QQ群： </li>

			<li><a href="#" target="_blank">很多好玩的内容</a></li>

		</ul>

	</div>

	<!-- NewsList结束 -->



</body>

</html>



这个是我下载的index

我如何让index 上有图片轮换呢。由于是小白。只能求助各位大神了

搭配的CSS

all.css





/*- - - - - - - - -样式属link.html - - - - - - - -*/

	/*广告*/



	/*图片轮播样式*/

	#banner .conbox{width:999em;position:absolute;}

	#banner .conbox div{float:left;width:500px;height:109px;overflow:hidden;}

	#banner .conbox div img{width:100%;height:100%;display:block;}

	#banner .switcher{float:right;position:absolute;right:5px;bottom:6px;z-index:99;}

	#banner .switcher a{float:left;width:12px;height:12px;line-height:0;text-align:center;overflow:hidden;font-size:14px;font-family:arial;color:#323232;margin-left:4px;background-color:#5b5a58;border-radius:10px;cursor:pointer;display:inline;}

	#banner .switcher a.cur,#banner .switcher a:hover{color:#fff;background-color:#3ba7cb;}

	/*新闻列表*/



	/*新闻列表*/

	.NewsList{margin:0 17px;}

	.NewsList li{padding:0 5px 0 7px;height:25px;line-height:25px;overflow:hidden;margin-bottom:8px;border-bottom:1px dashed #2d3f4b;}

	.NewsList li span{float:right;}


js



/**

 * @package Xslider - A slider plugin for jQuery

 * @version 0.5

 * @author xhowhy <http://x1989.com> 

 **/

;(function($){

	$.fn.Xslider = function(options){var settings ={

			affect: 'scrollx', //效果  有scrollx|scrolly|fade|none

			speed: 1200, //动画速度

			space: 6000, //时间间隔

			auto: true, //自动滚动

			trigger: 'mouseover', //触发事件 注意用mouseover代替hover

			conbox: '.conbox', //内容容器id或class

			ctag: 'a', //内容标签 默认为<a>

			switcher: '.switcher', //切换触发器id或class

			stag: 'a', //切换器标签 默认为a

			current:'cur', //当前切换器样式名称

			rand:false //是否随机指定默认幻灯图片

		};

		

		var len=$(this).find(".conbox>div")

		var html=''

		for (var i=1;i<=len.length;i++)

		{

			if (i==1)

			{html+="<a href='#' class='cur'></a>"}

			else

			{html+="<a href='#'></a>"	}

			

		}

		$(this).find(".conbox").after('<div class="switcher">'+html+'</div>')

		

		settings = $.extend({}, settings, options);

		var index = 1;

		var last_index = 0;

		var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);

		var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);

		if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}

		if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});

			});

		}

		function slide(){if (index >= $contents.length) index = 0;

			$stag.removeClass(settings.current).eq(index).addClass(settings.current);

			switch(settings.affect){case 'scrollx':

					$conbox.width($contents.length*$contents.width());

					$conbox.stop().animate({left:-$contents.width()*index},settings.speed);

					break;

				case 'scrolly':

					$contents.css({display:'block'});

					$conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);

					break;

				case 'fade':

					$contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)

							 .end()

							 .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)

					break;

				case 'none':

					$contents.hide().eq(index).show();

					break;

			}

			last_index = index;

			index++;

		};

		if(settings.auto) var Timer = setInterval(slide, settings.space);

		$stag.bind(settings.trigger,function(){_pause()

			index = $(this).index();

			slide();

			_continue()

		});

		$conbox.hover(_pause,_continue);

		function _pause(){

			clearInterval(Timer);

		}

		function _continue(){

			if(settings.auto)Timer = setInterval(slide, settings.space);

		}	

	}

})(jQuery);


...全文
1308 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
5AnJam 2018-10-26
  • 打赏
  • 举报
 回复
给个小建议 你可以用dw来打开这个html文件 然后dw可以看到你的js和css文件是否跟这个html配对到了 如果配不到一般是文件路径的问题 就是link那里
方_糖 2018-10-23
  • 打赏
  • 举报
 回复
你这个轮播是不是直接在网页上F12复制粘贴过来的资源.... 你想要的效果是那种 页面那种普通的轮播还是很多个图片排列一起向左移动的那种轮播呢？
柳叶寒烟 2018-10-23
  • 打赏
  • 举报
 回复
资源的相对路径正确吗
方_糖 2018-10-23
  • 打赏
  • 举报
 回复
我已经把你的代码的效果完善了试了一遍，最后他的效果是这样的，这个CSS还需要你自己去完善 我把JS里面setting里的affect换了一个，scrollx我试了，用不出来，改变的width和left都有问题 最后给你完整的代码 ******************************************************************************* HTML ``` <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=320,minimum-scale=0.5, maximum-scale=5, user-scalable=no"> <link href="css.css" rel="stylesheet" /> </head> <body> <div id="banner"> <div class="conbox"> <div><a href=""><img src="img/1.jpg" /></a></div> <div><a href=""><img src="img/2.jpg" /></a></div> <div><a href=""><img src="img/3.jpg" /></a></div> <div><a href=""><img src="img/1.jpg" /></a></div> <div><a href=""><img src="img/2.jpg" /></a></div> <div><a href=""><img src="img/3.jpg" /></a></div> </div> <!--switcher 由JS添加 --> </div> <!-- <div id="NewsList"> <ul class="NewsList"> <li>我的小站</li> <li>我的QQ </li> <li>我的QQ群： </li> <li><a href="#" target="_blank">很多好玩的内容</a></li> </ul> </div> --> <script src="jquery.js"></script> <script src="js.js"></script> </body> </html> ``` ***************************************************************************** CSS ``` /*- - - - - - - - -样式属link.html - - - - - - - -*/ /*广告*/ *{ margin:0; padding:0; list-style: none; } body{ background: #000; } /*图片轮播样式*/ /*- - - - - - - - -样式属link.html - - - - - - - -*/ /*广告*/ /*图片轮播样式*/ #banner .conbox{width:999em;position: relative;} #banner .conbox div{float:left;width:500px;height:500px;overflow:hidden;position:absolute;top:0px;left:0px;} #banner .conbox div img{width:500px;height:500px;display:block;} #banner .switcher{float:right;position:absolute;right:5px;bottom:6px;z-index:99;} #banner .switcher a{float:left;width:12px;height:12px;line-height:0;text-align:center;overflow:hidden;font-size:14px;font-family:arial;color:#323232;margin-left:4px;background-color:#5b5a58;border-radius:10px;cursor:pointer;display:inline;} #banner .switcher a.cur,#banner .switcher a:hover{color:#fff;background-color:#3ba7cb;} /*新闻列表*/ /*新闻列表*/ .NewsList{margin:0 17px;} .NewsList li{padding:0 5px 0 7px;height:25px;line-height:25px;overflow:hidden;margin-bottom:8px;border-bottom:1px dashed #2d3f4b;} .NewsList li span{float:right;} ``` ********************************************************************************** JS ``` (function($){ $.fn.Xslider = function(options){ var settings ={ affect: 'fade', //效果 有scrollx|scrolly|fade|none speed: 1200, //动画速度 space: 2000, //时间间隔 auto: true, //自动滚动 trigger: 'mouseover', //触发事件 注意用mouseover代替hover conbox: '.conbox', //内容容器id或class ctag: 'a', //内容标签 默认为<a> switcher: '.switcher', //切换触发器id或class stag: 'a', //切换器标签 默认为a current:'cur', //当前切换器样式名称 rand:false //是否随机指定默认幻灯图片 }; var len=$(this).find(".conbox>div"); var html='' for (var i=1;i<=len.length;i++) { if (i==1) {html+="<a href='#' class='cur'></a>"} else {html+="<a href='#'></a>" } } $(this).find(".conbox").after('<div class="switcher">'+html+'</div>') settings = $.extend({}, settings, options); var index = 1; var last_index = 0; var $conbox = $(this).find(settings.conbox); var $contents = $conbox.find(settings.ctag); console.log($contents); var $switcher = $(this).find(settings.switcher); var $stag = $switcher.find(settings.stag); if(settings.rand) { index = Math.floor(Math.random()*$contents.length); slide(); } if(settings.affect == 'fade'){ $.each($contents,function(k, v) { (k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0}); }); } function slide() { if (index >= $contents.length) index = 0; $stag.removeClass(settings.current).eq(index).addClass(settings.current); switch(settings.affect){ case 'scrollx': $conbox.width($contents.length*$contents.width()); $conbox.stop().animate({left:-$contents.width()*index},settings.speed); break; case 'scrolly': $contents.css({display:'block'}); $conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed); break; case 'fade': $contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1) .end() .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2) break; case 'none': $contents.hide().eq(index).show(); break; } last_index = index; index++; }; if(settings.auto){ var Timer = setInterval(slide, settings.space); } $stag.bind(settings.trigger,function(){ _pause() index = $(this).index(); slide(); _continue() }); $conbox.hover(_pause,_continue); function _pause(){ clearInterval(Timer); } function _continue(){ if(settings.auto) Timer = setInterval(slide, settings.space); } } $('#banner').Xslider(); })(jQuery); ``` 注意JS的最后要有$('#banner').Xslider();，你不用他他怎么出来。。。 还有...的把你的JS ，CSS ，JQUERY的路径都改了，你记得自己改回去...
nonclg 2018-10-19
  • 打赏
  • 举报
 回复
资源是全的。只是发布者把index.html里的轮换代码删除了。我由于不懂，不会添加。
能帮忙补全或者提示吗？
引用 5 楼 usecf 的回复:
看看

[quote=引用 3 楼 nonclg 的回复:]
这个我也不知道。我下载的单页 CSS JS都是单独的文件 我没办法发附件，只有贴出来代码 有大佬能帮忙解决吗。我不会在html调用


估计是你下载的资源部全

看看这个https://www.jb51.net/jiaoben/552051.html[/quote]
usecf 2018-10-19
  • 打赏
  • 举报
 回复
看看

引用 3 楼 nonclg 的回复:
这个我也不知道。我下载的单页 CSS JS都是单独的文件 我没办法发附件，只有贴出来代码 有大佬能帮忙解决吗。我不会在html调用


估计是你下载的资源部全

看看这个https://www.jb51.net/jiaoben/552051.html
usecf 2018-10-19
  • 打赏
  • 举报
 回复
引用 2 楼 qq_41114603 的回复:
[quote=引用 1 楼 usecf 的回复:]
;(function($){ 你前面这个分号干啥的

这个是为了防止上一个JS文件结尾没有分号；两个自执行函数的话，如果第一个结尾没有分号，第二个函数就会报错[/quote]

谢谢 之前没见过这种写法
nonclg 2018-10-19
  • 打赏
  • 举报
 回复
这个我也不知道。我下载的单页 CSS JS都是单独的文件 我没办法发附件，只有贴出来代码 有大佬能帮忙解决吗。我不会在html调用
風灬雲 2018-10-19
  • 打赏
  • 举报
 回复
引用 1 楼 usecf 的回复:
;(function($){ 你前面这个分号干啥的

这个是为了防止上一个JS文件结尾没有分号；两个自执行函数的话，如果第一个结尾没有分号，第二个函数就会报错
usecf 2018-10-19
  • 打赏
  • 举报
 回复
;(function($){ 你前面这个分号干啥的
react+es6+js
js核心内容： 1、学习变量与函数的定义与使用 2、深度剖析元素的获取及事件绑定 3、玩转js属性操作和流程控制 4、实战必备技能之console/alert调试 5、深入了解变量、函数作用域和闭包 6、全方位讲解数据类型及类型...
仿抖音视频全屏播放&滑动切换
但是，经过实践，在安卓客户端，多数时候都是不能实现自动播放，经过多方调研，web端无法处理，最终求助客户端，通过修改webview容器相关参数，配合添加autoplay属性实现自动播放，其处理如下： webView....
html5仿抖音全屏播放,仿抖音视频全屏播放&滑动切换
1 前言随着移动技术的快速迭代，数据流量费用的快速下降，...2 实现效果image3 设计方案视频播放video标签`video`标签是HTML5新增的用于视频播放的标签，MDN对其介绍如下：复制代码对于HTML 元素 用于在HTML或者XHTM...
springboot+mysql大学生爱心互助代购网站-计算机毕业设计源码01012
管理员：后台首页、轮播图（轮播图管理）、公告管理（公告）、资源管理（校园资讯、资讯分类）、系统用户（管理员、求助用户、助人用户）、模块管理（求助方积分、助人方积分、积分申请、爱心志愿者、发放积分、需求...
LayUI_01 前端框架 LayUI基础说明
目录一、开始使用 - 入门指南UNPKG 引入示例codeHTML二、底层方法三、页面元素规范与说明codeCSScodeHTMLcodecode四、模块规范五、常见问题JScodeJavaScriptcode六、各大版本更新日志2.6.xv2.6.8 2021-05-30v2.6.7 ...
CSS

61,112

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章