基于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实现滚动切换效果左右切换按钮,可以添加按压效果,点击的时候取深色图片。

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

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

Javascript 相关文章推荐
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解vue-router基本使用
Apr 18 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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 函数学习简单小结
2010/07/08 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php和html的区别点详细总结
2019/09/24 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JsDom 编程小结
2011/08/09 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python求列表交集的方法汇总
2014/11/10 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
大学秋游活动方案
2014/02/11 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS