基于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標簽是為了加標題的

效果圖如下: