基于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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
深入分析javascript中console命令
Aug 14 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Preload基础使用方法详解
Feb 03 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
查找Vue中下标的操作(some和findindex)
Aug 12 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JS回调函数深入理解
2019/10/16 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Pandas的Apply函数具体使用
2020/07/21 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
公司会计主管岗位责任制
2014/03/01 职场文书
公司晚会主持词
2014/03/22 职场文书
爱我中华教学反思
2014/04/28 职场文书
解除劳动合同协议书
2014/09/17 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2016新年慰问信范文
2015/03/25 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang