JS 横向循环滑动也可移动性切换

最新推荐文章于 2021-10-16 16:18:50 发布

BandaYung

最新推荐文章于 2021-10-16 16:18:50 发布

阅读量2.8k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_30552993/article/details/52246071

版权

本文介绍了一种使用JS实现的横向循环滑动效果，包括实现原理和关键的两个JS方法：setTab()用于切换底部图片和顶部图片，以及自动循环滚动功能，当鼠标移至上方时自动停止滚动。

摘要由CSDN通过智能技术生成

一、先上效果图：

二、实现原理：

主要是通过设置不同的样式然后每个样式都后缀都是不一样的。

比如class:tab_tophome_1,tab_tophome_2,...;图片也是同样的道理。

三、里面有两个JS的方法：

1.setTab(name,itemCnt,curItem, classHide,classShow)设置图片选择底下那个图片然后换上面的图片

2.自动循环滚动，当移动在上面是停止循环。

四、代码：

<!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=gb2312" />
<title>横向循环滑动</title>
<style type="text/css">
/* CSS Document */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em { margin:0; padding:0; border:0; }
ul, ol, li { list-style:none; }
input, button { margin:0; font-size:12px; vertical-align:middle; }
body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
table { border-collapse:collapse; border-spacing:0; }
.clearfloat { height:0; font-size:1px; clear:both; line-height:0; }
#container {
	width: 960px;
	text-align: left;
	height: 347px;
	background: #fffee2;
}
a { color:#333; text-decoration:none; }
a:hover { color:#ef9b11; text-decoration:underline; }
.on { background:url(bg02.gif) no-repeat left top; padding-left:4px; widt