<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.js" type="text/javascript" ></script>
<title>动态滚动div(实现书本翻页功能)</title>
<style type="text/css">
<!--
.scroll {
width:920px;
overflow:hidden;
}
.scrollLeft {
width:1920px;
height:450px;
margin:0px;
padding:0px;
clear:both;
position:relative;
overflow:hidden;
}
.scrollLeft img {
width:960px;
height:450px;
border:#CCCCCC solid 1px;
}
.scrollLeft .chapter {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
.scrollLeft .right {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
.scrollLeft .left {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
-->
</style>
</head>
<body>
<div style="width:960px;position:relative;background-color:rgb(255, 255, 255);overflow:hidden;">
<div class="scrollLeft" id="scrollLeft">
<div class="chapter" id="chapter_1" style="margin-left:0px;"><a href="#"><img src="css/img/chapter_0.jpg" align="图片"/></a></div>
</div>
</div>
<div align="center" style="width:960px;">
<input type="button" id="left" value="left" onclick='RollAround.prev();'/>
<input type="button" id="right" value="right" onclick='RollAround.next();'/>
</div>
<script>
<!--
var currentPageNo = 1;
var intervalId;
var RollAround = {
speedTime : 10,
refreshPX : 20,
maxPX : 0,
marqueeleft : function(){
var currentchapter = $("#chapter_"+currentPageNo);
if(RollAround.maxPX==0){
$("#left").attr("disabled", true);
$("#right").attr("disabled", true);
getPage('left').insertAfter(currentchapter);
}
if(RollAround.maxPX == 960){
clearInterval(intervalId);
$("#chapter_"+(currentPageNo)).remove();
currentPageNo++;
$("#left").attr("disabled", false);
$("#right").attr("disabled", false);
}else{
RollAround.maxPX += RollAround.refreshPX;
var margin = (getPxNumber(currentchapter.css("margin-left")) - RollAround.refreshPX) + "px";
currentchapter.css("margin-left", margin);
//283295058
var nextchapter = $("#chapter_"+ (currentPageNo+1));
var next_margin = (getPxNumber(nextchapter.css("margin-left")) - RollAround.refreshPX) + "px";
nextchapter.css("margin-left", next_margin);
}
},
marqueeright : function(){
var currentchapter = $("#chapter_"+currentPageNo);
if(RollAround.maxPX==0){
getPage('right').insertBefore(currentchapter);
$("#left").attr("disabled", true);
$("#right").attr("disabled", true);
}
if(RollAround.maxPX == 960){
clearInterval(this.intervalId);
$("#chapter_" + currentPageNo).remove();
currentPageNo--;
$("#left").attr("disabled", false);
$("#right").attr("disabled", false);
}else{
RollAround.maxPX += RollAround.refreshPX;
var margin = (getPxNumber(currentchapter.css("margin-left")) + RollAround.refreshPX) + "px";
currentchapter.css("margin-left", margin);
//283295058
var nextchapter = $("#chapter_" + (currentPageNo-1));
var next_margin = (getPxNumber(nextchapter.css("margin-left")) + RollAround.refreshPX) + "px";
nextchapter.css("margin-left", next_margin);
}
},
prev : function(){
RollAround.marqueetype = "left";
RollAround.maxPX = 0;
//开始循环
intervalId =setInterval(RollAround.marqueeleft, RollAround.speedTime);
},
next : function(){
RollAround.marqueetype = "right";
RollAround.maxPX = 0;
//开始循环
intervalId =setInterval(RollAround.marqueeright, RollAround.speedTime);
}
}
function getPage(type){
if(type=='left'){
var nextPageNo =currentPageNo + 1;
var div = $('<div class="chapter" id="chapter_'+nextPageNo+'" style="margin-left:960px;"></div>')
div.append($('<a href="#"><img src="css/img/unit_'+nextPageNo+'.jpg" align="图片"/></a>'));
return div;
}else{
var prevPageNo = currentPageNo -1;
var div = $('<div class="chapter" id="chapter_'+prevPageNo+'" style="margin-left:-960px;"></div>')
div.append($('<a href="#"><img src="css/img/unit_'+prevPageNo+'.jpg" align="图片"/></a>'));
return div;
}
}
function getPxNumber(m){
var number = m.replace("px", "");
if(_isBlank(number)){
return 0;
}else{
return new Number(number);
}
}
function _isBlank(obj){
if(obj == null || obj == ""){
return true;
}
return false;
}
-->
</script>
</body>
</html>
分享到：
相关推荐
jquery+div实现同时滑动切换的图文展示特效插件下载.rar
本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
vue实现页面div盒子拖拽排序功能 vue 实现页面div盒子拖拽排序功能前言：目前市面上有很多实现拖拽排序功能的插件和方法，本节不过多累述，只讲一种：css3的transition-group方法 效果图： 1. DOM中使用： ...
浮动div 页面两边滚随滚动条滚动的DIV div滚动
js+div实现文字滚动和图片切换效果代码.docx
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
Marquee配合DIV实现符合标准的文字滚动
在jsp中利用单选按钮实现两个div之间的显示与隐藏
javascript+div实现多菜单切换 实现多个栏目的切换菜单.项目中经常用到
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如：加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
js控制div左右切换带左右箭头
js div实现左右滚动 无缝接 ，比 marquee强
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
DIV滚动悬浮层，页面滚动条滚动，悬浮层保持位置不变！
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
鼠标滚动div内容,JS特效.
jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册...
jquery特效DIV层跟随页面向下滚动