I recently used the effects of switching left and right pictures on a page and scrolling the news list, which are summarized as follows:
/* reset.css */
body{background:#fff;color:#444;height:100%;line-height:1.4;}
html{height:100%;overflow-y:scroll;-webkit-text-size-adjust:none;}
body,input,button,textarea,select,h1,h2,h3,h4,h5,h6{font:12px/1.5 Arial,Tahoma,Helvetica,"5b8b4f53",sans-serif;}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:bottom;}
/* base.css */
a:link,a:visited,a:hover,a:active{cursor:pointer;text-decoration:none;}
a:active,a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}
a:hover {text-decoration:underline;}
li {list-style:none;}
ol li {display:inline;}
/*common.css*/
.outer{position:relative; overflow:hidden; background:url(../images/line.gif) repeat-x bottom; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute; left:50%; top:0; margin-left:-990px; height:400px; width:1980px;overflow:hidden;}
.flash_img {
overflow: hidden;
width: 1980px;
height: 400px;
position: relative
}
.banner{height:400px;}
.flash_img .img-box {
position: absolute;
}
.flash_img .img-box li{float:left;}
.flash_img img {
display: block;
}
.flash_item {
position: absolute;
right: 510px;
bottom: 10px;
height: 12px;
}
.flash_item li {
background:url(../images/flash_item.png) no-repeat right;
color: #D94B01;
cursor: pointer;
float: left;
font-size: 12px;
height: 12px;
line-height: 12px;
margin-left: 15px;
text-align: center;
width: 12px;
}
.flash_item li.on
{
background-position:left;
color: #FFFFFF;
font-weight: bold;
height: 12px;
line-height: 12px;
width: 12px;
}
.flash_item li img {
display: block
}
/*default.css*/
.indexNews{width:700px; height:29px; bottom:0; left:50%; position:absolute; margin-left:-480px; z-index:999;}
.indexNews strong{color:#409dd9;float: left;}
.indexNews strong a{color:#409dd9;text-decoration:none;}
.indexNews .core{height:18px; line-height:18px; overflow:hidden;}
.indexNews .core span{color:#409dd9; margin-right:20px;}
.indexNews .core a{margin-left:10px;color:#666;}
.outer{height:440px;}
The js folder contains three files: jquery-1.7.2.min.js, indexPic.js, kxbdSuperMarquee.js. The first one can be downloaded directly from the Internet, the second one is to switch pictures, and the third one is to scroll the news list.
document.writeln("");
document.writeln("");
(function($) {
$.fn.slideImg = function(settings) {
settings = jQuery.extend({
speed: "normal",
timer: 1000
}, settings);
return this.each(function() {
$.fn.slideImg.scllor($(this), settings);
});
};
$.fn.slideImg.scllor = function($this, settings) {
var index = 0;
var scllorer = $(".img-box li", $this);
var size = scllorer.size();
var slideW = scllorer.outerWidth();
var $selItem = $("
", {
"class": "flash_item",
html: function() {
var $selItemHTML = "";
if (size == 1) {
return;
} else if (size > 1) {
for (var i = 0; i < size; i ) {
i == 0 ? $selItemHTML = '
' : $selItemHTML = '';
}
return $selItemHTML;
}
}
}).appendTo($this);
var li = $(".flash_item li", $this);
var showBox = $(".img-box", $this);
var intervalTime = null;
li.hover(function() {
var that = this;
if (intervalTime) {
clearInterval(intervalTime);
}
intervalTime = setTimeout(function() {
index = li.index(that);
ShowAD(index);
}, 200);
}, function() {
clearInterval(intervalTime);
interval();
});
showBox.hover(function() {
if (intervalTime) {
clearInterval(intervalTime);
}
}, function() {
clearInterval(intervalTime);
interval();
});
function interval() {
intervalTime = setInterval(function() {
ShowAD(index);
index ;
if (index == size) {
index = 0;
}
}, settings.timer);
}
interval();
var ShowAD = function(i) {
showBox.animate({ "left": -i * slideW }, settings.speed);
li.eq(i) .addClass("on").siblings().removeClass("on");
};
}; :