编程 Javascript

基于jQuery实现滚动切换效果

Posted in Javascript onDecember 02, 2016

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

效果如下图:

基于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="script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function () {
      var page = 1;
      var i = 4;
      var $v_trends = $("#view_menu_trends").find("li");
      $v_trends.eq(0).addClass('currentTrends');//默认第一个点选中
      $(".next").click(function () {
        var $parent = $("#view_menu");
        var $v_content = $("#view_content");//外围width
        var $v_show = $("#view_content_fixed");//

        var v_width = $v_content.width();
        var len = $v_content.find('li').length;
        var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
        if (!$v_show.is(":animated")) {
          if (page == page_count) {
            $v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页
            page = 1;
          } else {
            $v_show.animate({ left: '-=' + v_width }, 'slow');
            page++;
          }
          $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
        }
      });
      $(".pre").click(function () {
        var $parent = $("#view_menu");
        var $v_content = $("#view_content");//外围width
        var $v_show = $("#view_content_fixed");//
        var v_width = $v_content.width();
        var len = $v_content.find('li').length;
        var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
        if (!$v_show.is(":animated")) {//判断是否是动画状态
          if (page == 1) {
            $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页
            page = page_count;
          } else {
            $v_show.animate({ left: '+=' + v_width }, 'slow');
            page--;
          }
          $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
        }
      });
    });
  </script>
</head>
<body>
  <div>
    <div id="view_menu">
      <div id="view_menu_title"><span>热播电视剧</span></div>
      <div id="view_menu_trends">
        <ul>
          <li>●</li>
          <li>●</li>
          <li>●</li>
        </ul>
      </div>
      <div id="view_menu_control">
        <span>
          <img class="pre" src="Rollpic/left_arrow.png" /></span>
        <span>
          <img class="next" src="Rollpic/right_arrow.png" /></span>
      </div>
    </div>
    <div id="view_content">
      <div id="view_content_fixed">
        <ul>
          <li>
            <div>
              <img src="Rollpic/1.jpg" /></div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/2.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/3.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/4.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/5.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/6.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/7.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/8.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/9.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/10.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/11.jpg" />
            </div>
            <span></span></li>
          <li>
            <div>
              <img src="Rollpic/12.jpg" />
            </div>
            <span></span></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

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标签是为了加标题的

效果图如下:

基于jQuery实现滚动切换效果

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

基于jQuery实现滚动切换效果

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

基于jQuery实现滚动切换效果左右切换按钮,可以添加按压效果，点击的时候取深色图片。

好了，大体的效果就这样，细节自己去玩吧，希望自己能坚持写下去，从小案例到大案例，好好学习！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于jQuery实现滚动切换效果

- Author -

猫爷°

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 提交和设置表单的值

Dec 19 Javascript

基于jquery的3d效果实现代码

Mar 23 Javascript

『jQuery』.html(),.text()和.val()的概述及使用

Apr 22 Javascript

jquery网页元素拖拽插件效果及实现

Aug 05 Javascript

javascript创建createXmlHttpRequest对象示例代码

Feb 10 Javascript

javascript实现的一个随机点名功能

Aug 26 Javascript

详解AngularJS验证、过滤器、指令

Jan 04 Javascript

Es6 Generator函数详细解析

Feb 24 Javascript

vue-cli构建项目下使用微信分享功能

May 28 Javascript

js实现web调用摄像头 js截取视频画面

Apr 21 Javascript

jsonp跨域获取百度联想词的方法分析

May 13 Javascript

ant design vue导航菜单与路由配置操作

Oct 28 Javascript

遍历json 对象的属性并且动态添加属性的实现

Dec 02 #Javascript

Vue.js组件tree实现无限级树形菜单

Dec 02 #Javascript

js中的eval()函数把含有转义字符的字符串转换成Object对象的方法

Dec 02 #Javascript

Vue.js第四天学习笔记

Dec 02 #Javascript

微信公众平台开发教程（四）实例入门：机器人回复(附源码)

Dec 02 #Javascript

基于javascript实现按圆形排列DIV元素(三)

Dec 02 #Javascript

js中动态创建json,动态为json添加属性、属性值的实例

Dec 02 #Javascript

You might like

PHP 七大优势分析

2009/06/23 PHP

php模拟js函数unescape的函数代码

2012/10/20 PHP

PHP使用Redis长连接的方法详解

2018/02/12 PHP

php实现表单提交上传文件功能

2018/05/28 PHP

PHP赋值的内部是如何跑的详解

2019/01/13 PHP

php字符串函数 str类常见用法示例

2020/05/15 PHP

JS检测图片大小的实例

2013/08/21 Javascript

animate 实现滑动切换效果【实例代码】

2016/05/05 Javascript

Node.js的npm包管理器基础使用教程

2016/05/26 Javascript

浅析jQuery中使用$所引发的问题

2016/05/29 Javascript

javascript实现任务栏消息提示的简单实例

2016/05/31 Javascript

checkbox 选中一个另一个checkbox也会选中的实现代码

2016/07/09 Javascript

jQuery easyui刷新当前tabs的方法

2016/09/23 Javascript

node通过express搭建自己的服务器

2017/09/30 Javascript

web页面和微信小程序页面实现瀑布流效果

2018/09/26 Javascript

详解JS实现简单的时分秒倒计时代码

2019/04/25 Javascript

在Python中操作字典之clear()方法的使用

2015/05/21 Python

Python下载懒人图库JavaScript特效

2015/05/28 Python

python中的lambda表达式用法详解

2016/06/22 Python

关于Python如何避免循环导入问题详解

2017/09/14 Python

Python语言实现百度语音识别API的使用实例

2017/12/13 Python

python安装virtualenv虚拟环境步骤图文详解

2019/09/18 Python

解决Django中checkbox复选框的传值问题

2020/03/31 Python

python获取时间戳的实现示例(10位和13位)

2020/09/23 Python

使用OpenCV校准鱼眼镜头的方法

2020/11/26 Python

Python 获取异常（Exception）信息的几种方法

2020/12/29 Python

浅析pandas随机排列与随机抽样

2021/01/22 Python

AmazeUI中各种的导航式菜单与解决方法

2020/08/19 HTML / CSS

几个Shell Script面试题

2014/04/18 面试题

《我的信念》教学反思

2014/02/15 职场文书

中国梦口号

2014/06/13 职场文书

经贸日语专业自荐信

2014/09/02 职场文书

幼儿园小班个人工作总结

2015/02/12 职场文书

高中诗歌鉴赏教学反思

2016/02/16 职场文书

Nginx部署vue项目和配置代理的问题解析

2021/08/04 Servers

利用python做数据拟合详情

2021/11/17 Python