编程 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陷阱题

Feb 07 Javascript

poshytip 基于jquery的插件主要用于显示微博人的图像和鼠标提示等

Oct 12 Javascript

浏览器的JavaScript引擎的识别方法

Oct 20 Javascript

利用cookie记住背景颜色示例代码

Nov 04 Javascript

JS图片切换的具体方法(带缩略图版)

Nov 12 Javascript

在JavaScript中处理字符串之link()方法的使用

Jun 08 Javascript

JS实现带圆弧背景渐变效果的导航菜单代码

Oct 13 Javascript

javascript简单比较日期大小的方法

Jan 05 Javascript

jquery实现图片上传前本地预览功能

May 10 Javascript

使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

Sep 01 Javascript

详解Angular 自定义结构指令

Jun 21 Javascript

详解angular应用容器化部署

Aug 14 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

mayfish 数据入库验证代码

2010/04/30 PHP

PHP无法访问远程mysql的问题分析及解决

2013/05/16 PHP

php中{}大括号是什么意思

2013/12/01 PHP

PHP中的use关键字概述

2014/07/23 PHP

PHP中利用sleep函数实现定时执行功能实现代码

2016/08/25 PHP

php通过执行CutyCapt命令实现网页截图的方法

2016/09/30 PHP

PHP定义字符串的四种方式详解

2018/02/06 PHP

PHP如何使用JWT做Api接口身份认证的实现

2020/02/03 PHP

利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

2010/07/24 Javascript

jquery实现table鼠标经过变色代码

2013/09/25 Javascript

构造函数+原型模式构造js自定义对象(最通用)

2014/05/12 Javascript

js在指定位置增加节点函数insertBefore()用法实例

2015/01/12 Javascript

jQuery插件StickUp实现网页导航置顶

2015/04/12 Javascript

详解javascript中原始数据类型Null和Undefined

2015/12/17 Javascript

实现JavaScript高性能的数据存储

2016/12/11 Javascript

微信小程序本地数据读取实例

2017/04/27 Javascript

nodejs处理图片的中间件node-images详解

2017/05/08 NodeJs

微信小程序实现左右联动的实战记录

2018/07/05 Javascript

JavaScript中filter的用法实例分析

2019/02/27 Javascript

js+html实现点名系统功能

2019/11/05 Javascript

vue 解决文本框被键盘遮住的问题

2019/11/06 Javascript

JS实现字体背景跑马灯

2020/01/06 Javascript

javascript实现倒计时提示框

2021/03/02 Javascript

[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/17 DOTA

树莓派实现移动拍照

2019/06/22 Python

django框架创建应用操作示例

2019/09/26 Python

用 Python 制作地球仪的方法

2020/04/24 Python

详解KMP算法以及python如何实现

2020/09/18 Python

Python应用自动化部署工具Fabric原理及使用解析

2020/11/30 Python

Python 实现集合Set的示例

2020/12/21 Python

德国游戏机商店：Konsolenkost

2019/12/08 全球购物

餐厅总经理岗位职责

2013/12/31 职场文书

2014年廉洁自律承诺书

2014/05/26 职场文书

销售区域经理岗位职责

2015/04/10 职场文书

初中生物教学随笔

2015/08/15 职场文书

Python进行区间取值案例讲解

2021/08/02 Python