基本概念/蜘蛛陷阱
　　'''蜘蛛陷阱'''是阻止爬行网站的障碍物，通常是那些显示网页的技术方法，目前很多浏览器在设计的时候考虑过这些因素，所以可能网页界面看起来非常正常，但这些蜘蛛陷阱会对蜘蛛程序造成障碍，如果消除这些蜘蛛陷阱，可以使蜘蛛程序收录更多的网页。SEO工作中，网页被收录是基础工作，但对于搜索引擎来讲，极少情况会100%收录你网站的所有网页，搜索引擎的设计的再精巧，也难以逾越所谓的蜘蛛陷阱。
如何避免：/蜘蛛陷阱
　　1：采用session id的页面，有的销售类站点为了分析用户的某些信息会采用会话ID来跟踪用户，访问站点的时候每个用户访问都会增加一次session id而加入到URL中，同样蜘蛛的每一次访问也会被当做为一个新用户,每次蜘蛛来访问的URL中都会加入一个session id，这样就会产生了同一个页面但URL不同的情况，这种的一来会产生复制内容页面，造成了高度重复的内容页，同时也是最常见的蜘蛛陷阱之一。比如说有的网站的为了提高销售业绩，而进行弹窗会话等，比如说您好来自XXX地的朋友等。
　　2：常识性的蜘蛛陷阱，采用强制注册或登录才能访问的页面，这种的对于蜘蛛来说就相当为难了，因为蜘蛛无法提交注册，更无法输入用户名和密码登录查看内容，对于蜘蛛来说我们直接点击查看到的内容也是蜘蛛所能看到的内容。
　　3：喜欢采用flash的站点，之所以说是喜欢采用flash的站点是因为对于一些中小型企业来说，因为flash本身可以做很多种效果，尤其是放在导航上视觉效果强，所以不少企业站喜欢弄个flash来展示自己公司的实力，文化，产品等，甚至一些企业站点的网站首页就是一个flash，要么是在多长时间后通过flash跳转到另外一个页面，要么就是通过flash上的链接让用户自己点击后进入一个新的页面，但是对于蜘蛛来说一来是很难读取flash中的内容，所以蜘蛛也很难点击flash上的链接。
　　4：动态URL，在url中加入过多的符号或者网址参数等，这种蜘蛛陷阱我在中曾经有提到，虽然说随着搜索引擎的的技术发展，动态url对于蜘蛛的抓取已经越来越不是问题了，但是从搜索引擎友好度上来讲，静态哪怕是伪相对来说都比动态url要好，可以看下很多SEO同行对于url中的处理方式。
　　5：框架，在早期框架到处被泛滥使用，而现在框架网页很多网站已经很少使用了，一是因为现在随着各大CMS系统的开发问世，网站维护相对也越来越简单了，早期网站使用框架是因为对网站页面的维护有一定的便利性了，现在已经大可不必了，而且不利于搜索引擎收录也是框架越来越少被使用的原因之一。
　　6：JS，虽然现在搜索引擎对于javascript里的链接是可以跟踪甚至在尝试拆解分析的，但是我们最好不要寄望于搜索引擎自己克服困难，虽然说通过js可以做一些效果不错的导航，但是css同样可以做到；为了提高网站对搜索引擎的友好度建议使网页能够更好的蜘蛛爬行，就尽量不要采用js，当然在seo中，js有一个好处就是站长不希望被收录的页面或者友情链接可以采用js。还有一种方法可以消除JavaScript 蜘蛛程序陷阱，即使用&&标签。&noscript&标签是为不支持JavaScript 的浏览器提供备选的代码。蜘蛛程序不会执行JavaScript, 因此他们通过处理&noscript&代码来代替。
　　7：深层次的网页，有的网页没有入口，而且距离网站的首页又很远，这种页面就相对较难被蜘蛛爬行到，当然对于那些权重高的网站可能会另当别论了。网站的页面要被收录，首先要需要基本的权重，首页的权重一般是最高的，然后首页的权重是可以传递到内页的，当内部页面的权重上升到可以被收录的门槛，页面就会被收录，按照这种理论，页面之间的权重传递是会递减的，因此，内页和首页的点击距离越近，越容易得到更多的首页权重传递。良好的网站结构可以让网站更多的页面被收录。
　　8：强制使用cookies，对于搜索引擎来说是相当于直接禁用了cookies的，而有些网站为了实现某些功能会采取强制cookies，比如说跟踪用户访问路径，记住用户信息，甚至是盗取用户隐私等，如果用户在访问这类站点时没有启用cookies，所显示的页面就会不正常，所以对于蜘蛛来讲同样的网页无法正常访问。
　　9：各种形式的跳转，对于相信很多seo童鞋已经非常熟悉了，但是对于其他302，或者meta refresh，javascript，flash等跳转，蜘蛛是很反感的，而且301也是不到万不得已的时候采用，任何跳转都会在一定程度上给蜘蛛的爬行带来障碍，所以你你懂得。
　　10：robots.txt书写错误和各种各样的作弊手法，比如说，等，采用伪装网页在判断来访者是蜘蛛还是普通浏览器者而显示不同的网页，使用默认错误的404页面等，同样会给蜘蛛带来爬行障碍。
&|&相关影像
互动百科的词条（含所附图片）系由网友上传，如果涉嫌侵权，请与客服联系，我们将按照法律之相关规定及时进行处理。未经许可，禁止商业网站等复制、抓取本站内容；合理使用者，请注明来源于。
登录后使用互动百科的服务，将会得到个性化的提示和帮助，还有机会和专业认证智愿者沟通。
此词条还可添加&
编辑次数：3次
参与编辑人数：3位
最近更新时间： 18:29:00
申请可获得以下专属权利：
贡献光荣榜博客分类：
文章原创地址：/blog/b2b4a3fc-c7b2-44a5-8e52-0b51e4ab37d8.html
我们首先在HTML页面中建立一个div，div里面放需要轮播的东西.
&div class="home_picture_div" id="home_picture_div"&
&&& &div id="banner_bg"&&/div&
&&& &div id="banner_info"&说哪儿网&/div&
&&& &ul&
&&& &li&1&/li&
&&& &li class="on"&2&/li&
&&& &li&3&/li&
&&& &li&4&/li&
&&& &/ul&
&&& &div id="banner_list"&
&&& &a style="display:" href="#" target="_blank"&&img alt="说哪儿网" src="image/1.png"&&/a&
&&& &a style="display:" href="#" target="_blank"&&img alt="shuonar" src="image/2.png"&&/a&
&&& &a style="display:" href="#" target="_blank"&&img alt="" src="image/3.jpg"&&/a&
&&& &a style="display:" href="#" target="_blank"&&img alt="说客" src="image/4.jpg"&&/a&
&/div&
下面对文本做CSS修饰。
&&& &style type="text/css"&
&&&&&&& .home_picture_div {
&&& position:
&&&
&&& width: 300
&&& height: 300
&&& float:
&&& overflow:
&&&&&&& }
&&&&&&& /* 图片列表的图片 */
#banner_list img{
border: 0
}
/* 图片标题背景 */
#banner_bg{
bottom: 0;
background-color: #000000;
height: 30
filter:Alpha(Opacity=40);
opacity: 0.4;
z-index: 1000;
width: 300
}
/* 图片标题 */
#banner_info{
bottom: 0;
height: 22
color: #FFF;
z-index: 1001;
font-weight:
}
.home_picture_div ul {
list-style-type:
filter: Alpha(Opacity=80);
opacity:0.8;
border:1px solid #FFFFFF;
z-index:1002;
padding:0;
border-radius: 5
}
.home_picture_div ul li{
padding: 0px 8
color: #FFF;
border: #E5EAFF 1
background:& #454545;
cursor:
}
.home_picture_div ul li.on {
background:#5CACEE;
}
&&& &/style&
下面用js对图片做轮播效果，我们在这里使用了jquery：
var t = n =0,
$(document).ready(function(){
$("#register_button").click(function(){
window.location.href = "nar_quick_register.html";
count = $("#banner_list a").&& //4
$("#banner_list a:not(:first-child)").hide();& //翼隐藏非第一张图
$("#banner_info").html($("#banner_list a:first-child").find("img").attr("alt"));
$("#banner-info").click(function(){
window.open($("#banner_list a:first-child").attr("href"),"_blank");
$(".home_picture_div li").click(function(){
var i = $(this).text()-1;&& //获取当前图片的索引值
if(i&=count)
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr("alt"));//给每张显示的图片加上alt
$("#banner_info").unbind().click(function(){
window.open($("#banner_list a").eq(i).attr("href"),"_blank");
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("home_picture_div").style.background = "";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
t = setInterval("showAuto()",4000);
$("#home_picture_div").hover(
function(){
clearInterval(t);
},function(){
t = setInterval("showAuto()",4000);
function showAuto(){
n = n&=(count-1)?0: ++n;
$("#home_picture_div li").eq(n).trigger("click");
}
要查看该效果，可以到的首页查看图片轮播效果，这里是源代码。
论坛回复 /
(0 / 2293)
shenyuc629
浏览: 138363 次
来自: 成都
我的天，写的还能在简洁一点吗。哈哈
时隔那么久了，就没人发现楼主说错了吗？
shenyuc629 写道@10楼，你看看vb以前的语言就知道 ...js实现图片轮播效果
作者：天空还下着雪
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现图片轮播效果的相关资料,需要的朋友可以参考下
本文实例讲解了js实现图片轮播效果代码，分享给大家供大家参考，具体内容如下
运行代码如下
具体代码如下
插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击
.cooperation-box {
height: 91
border-bottom: 1px solid #E0DED9;
.cooperation {
height: 50
padding: 20px 0;
.cooperation li {
width: 205
text-align:
.cooperation li a {
.cooperation li img {
height: 100%;
.cooperation-box&a {
z-index: 9;
height: 100%;
background: #f5f5f5;
font-family: '宋体';
font-size: 18
font-weight:
text-align:
line-height: 91
.cooperation-box&a:hover {
background: #e5e5e5;
.cooperation-box .prev {
border-right: 1px solid #E0DED9;
.cooperation-box .next {
border-left: 1px solid #E0DED9;
.cooperation-box .prev.disabled,
.cooperation-box .next.disabled {
background: #
.cooperation-box .prev.disabled:hover,
.cooperation-box .next.disabled:hover {
background: #
HTML布局( a标签最好加个title属性 )：
&div class="cooperation-box"&
&a class="prev" href="javascript:;"&&&/a&
&a class="next" href="javascript:;"&&&/a&
&ul class="cooperation"&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
&li&&a href="javascript:;" target="_blank"&&img src="images/img-demo3.jpg" alt=""&&/a&&/li&
JS脚本插件：
$.extend({
图片轮播效果
1、自动滚动
2、鼠标悬停
3、左右控制+禁止点击
调用：$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
scroll: function(options) {
// 默认配置
var defaults = {
box: '.cooperation-box', // 父容器
scrollbox: '.cooperation', // ul容器
time: 1500 // 切换时间
// 扩展配置
var conf = $.extend({}, defaults, options);
// 获取li的个数
var liSize = $(conf.box).find('li').size();
// 获取li的宽度
var liWidth = $(conf.box).find('li:first').width();
// 定义ul的宽度
$(conf.scrollbox).width(liWidth*liSize);
// 右箭头初始化(不可点)
$(conf.box).find('.next').addClass('disabled');
// 定义一个全局变量index索引变量
var index = 0;
// 切换函数
function switchFunc() {
if(index & liSize-5) { // 必须有5个显示在上面
index=liSize-5;
// 把滚动过的添加到后面，初始left值为0 index值为0
var scrolledLi = $(conf.box).find('li:lt('+index+')');
$(conf.scrollbox).append(scrolledLi);
$(conf.scrollbox).css('left', 0);
index = 0;
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
function() {
$(conf.box).find('.next').removeClass('disabled');
// 自动播放
var autoPlay = setInterval(function() {switchFunc();}, conf.time);
// 鼠标浮上暂停
$(conf.box).mouseover(function() {
clearInterval(autoPlay);
// 鼠标离开继续
$(conf.box).mouseout(function() {
autoPlay = setInterval(function() {switchFunc();}, conf.time);
// 点击左箭头
$(conf.box).find('.prev').click(function() {
if(index &= liSize-5) {
index=liSize-5;
$(this).addClass('disabled');
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
function() {
$(conf.box).find('.next').removeClass('disabled');
// 点击右箭头
$(conf.box).find('.next').click(function() {
if(index &= 0) {
index = 0;
$(this).addClass('disabled');
$(conf.scrollbox).stop(true, true).animate(
{'left': -liWidth*index},
function() {
$(conf.box).find('.prev').removeClass('disabled');
页面调用：
$(function() {
$.scroll({time: 1500});
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
页面宽度为1200px，然后轮播图宽度自动沾满屏幕，现在遇到的问题是，当窗口拉伸到1200以下，出现滚动条时，轮播会压缩为屏幕的宽度，而不是1200px,这样滚动就会发现轮播怎么解决这种问题？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个需要固定容器宽度 1200px，如果宽度是分段响应式的，要根据不同的段固定容器宽度。总的来说，就是要固定合适的容器大小。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
轮播图的每个宽度设置为100%，并且需要通过JS实时获取屏幕的宽度，以方便计算轮播图的总宽度（如果你的轮播图是float定位而不是position定位）。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这是浏览器对宽度解析的不一致造成的，你在包裹轮播图的最外层容器设置min-width: 1200像素试试
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你这个问题在ie6里面是没有问题，但是在ie6以上的都会出现这个，因为你有滚动条以后从新计算的宽度，背景没有改变，一般需要在有背景的那个容器设置一下min-width和你的图片宽度就好， ，这样移动滚动条就不会出现问题了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
设置轮播图的宽度是100%,这个是浏览器视口宽度的100%，如果出现滚动条，移动滚动条的时候定会出现有图片不能全部覆盖的情况。我觉得最好就是不让出现滚动条，如楼上说的设置最小宽度。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你不设置宽度或者把宽度设置成100%，就会有这个问题啊。设置成固定宽度，不过在高于1200px的宽度的屏幕上面会有空白。最好通过background-color,设置背景色。这样看着是宽度满屏的，在大屏幕上一样。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：11:11 提问
js图片轮播，函数内判断不执行，新手求助
不能循环播放图片，方法内的判断都不会执行，因为测试语句没弹出，但是函数内第一句是执行的，是怎么回事？
按赞数排序
没alert说明你id拼写错了，oImg_js是null，没有获取到dom对象
他直接相加得字符串了吧？然后图片直接消失？
因该没有获取到Dom
浏览器打个断点看下就知道了
截个图看一下，看的眼睛疼
其他相关推荐