基于jQuery实现滚动切换效果

2019-11-19 18:42:48

字体：大中小

来源：转载

供稿：网友

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

效果图如下: