基于jQuery实现滚动切换效果

(编辑：jimmy 日期: 2025/7/1 浏览：3 次 )

仿锋利的Jquery案例做的一个滚动切换效果，供大家参考，具体内容如下

效果如下图:

前台HTML代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>滚动图</title>
  <link rel="stylesheet" type="text/css" href="css/RollControl.css" />
  <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.js">

RollControl.css代码如下:




body {
  margin: 0px;
  padding: 0px;
}

#view_menu {
  width: 600px;
  height: 30px;
  line-height: 30px;
  cursor: default;
}

#view_menu_title {
  float: left;
  font-family: 'Microsoft YaHei';
  width: 150px;
  text-align: center;
}

#view_menu_trends {
  float: left;
  line-height: 30px;
  color: #99CC99;
  font-size: 10px;
}

.currentTrends {
  color: #009933;
}

#view_menu_trends ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#view_menu_trends ul li {
  text-align: center;
  float: left;
  width: 15px;
}

#view_menu_control {
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
}

#view_menu_control img {
  width: 25px;
  height: 25px;
  line-height: 30px;
  cursor: pointer;
}

#view_content {
  width: 548px;
  height: 178px;
  position: relative;
  overflow: hidden;
  border: 1px solid #CCCCCC;
}

#view_content_fixed {
  position: absolute;
  width: 2500px;
}

#view_content_fixed img {
  cursor: pointer;
}

#view_content ul {
  margin: 0px;
  position: absolute;
  padding: 0px;
}

#view_content ul li {
  margin: 0px;
  padding: 0px;
  float: left;
  padding: 8px;
  list-style: none;
  display: inline;
}




.view_content_fixed下的SPAN标签是为了加标题的


效果图如下:



还有两个地方没有细化，第一个就是



这个动态点点击的时候也可以切换页面，第二个


左右切换按钮,可以添加按压效果，点击的时候取深色图片。
好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，好好学习！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：微信公众平台开发教程（五）详解自定义菜单
下一篇：遍历json 对象的属性并且动态添加属性的实现