基於jQuery實現滾動切換效果
編輯：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標簽是為了加標題的
效果圖如下:
還有兩個地方沒有細化，第一個就是
這個動態點點擊的時候也可以切換頁面，第二個
左右切換按鈕,可以添加按壓效果，點擊的時候取深色圖片。
好了，大體的效果就這樣，細節自己去玩吧，希望自己能堅持寫下去，從小案例到大案例，好好學習！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦