css图片左右滚动特效（怎么用DIV+CSS做5个图片滚动带链接的效果）

本文目录

• 怎么用DIV+CSS做5个图片滚动带链接的效果
• 图片首尾相接左右循环滚动代码
• 我做相册左右滚动效果要显示的大图片的样式CSS如下max-width: 612px;overflow:hidden IE里面显示了原大小
• 图片左右滚动代码
• css中怎样让内容或图片滚动
• 关于CSS图片滚动效果

怎么用DIV+CSS做5个图片滚动带链接的效果

css和div做滚动效果的我没实现过，都用的js实现的；

效果如下图

完整代码以及引用的插件直接压缩包了，查看请下载附件。

《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》点击左走或右走《/title》
《style》
#body .middle{
width:1024px; 
    height:180px;   
margin:5px auto; 
overflow:hidden; 
position:relative
}
#body .middle .bt .l{
position:absolute; 
left:10px; 
top:70px; 
background:#000; 
z-index:20; 
width:30px; 
height:30px; 
font-size:20px; 
opacity:***; 
border-radius:15px; 
cursor:pointer; 
color:#fff; 
text-align:center;
line-height:30px;}
#body .middle .bt .r{
position:absolute; 
right:10px; 
top:70px; 
background:#000; 
z-index:20;width:30px; 
height:30px; 
font-size:20px; 
opacity:***; 
border-radius:15px; 
cursor:pointer; 
color:#fff; 
text-align:center; 
line-height:30px;
}
#body .middle .gd ul{
position:absolute; 
width:1022px; 
margin-top:5px;
}
#body .middle .gd li{
float:left; 
width:159px; 
height:160px; 
margin-left:10px }
#body .middle .gd li img{
width:100%; 
height:100%
}《/style》
《link href="*****" rel="stylesheet" type="text/css"》
  《script src="*****"》《/script》
  《script》 
  $(function(){ //载入后
 var d=$(’#body .middle .gd ’);
 var ul=*****(’ul’);
 var li=*****(’li’);
 var l=$(’#body .middle .bt .l’);
 var r=$(’#body .middle .bt .r’)
 
 //设置ul的宽
 *****(  (*****()+10)****** );
 
 var zy=false;
 
 //给左右加事件
 *****(function(){  zy=true;  zou(true);  });
 *****(function(){  zy=false; zou(false);  });
 //自动切换
 *****(function(){
 if(zy){
*****(); //自动点击 
 }else{
*****(); //自动点击 
}
 },2000);
/*
zuozou  向左或向右走
*/
function zou(zuozou){
var k=$(’#body .middle .gd ul li’).width()*-1;
var t=$(’#body .middle .gd ul li’).length-1;
if(zuozou){
//向左
$(’#body .middle .gd ul’).stop(true,true).animate({’left’:k},function(){ //执行完动画后
$(’#body .middle .gd ul li’).eq(0).appendTo($(’#body .middle .gd ul’));
$(’#body .middle .gd ul’).css({ ’left’:0 });
});
}else{
//向右
$(’#body .middle .gd ul li’).eq(t).prependTo($(’#body .middle .gd ul’));
$(’#body .middle .gd ul’).css({ ’left’:k});
$(’#body .middle .gd ul’).stop(true,true).animate({’left’:0});
}
}
})
《/script》
《/head》
《body》
《div id="body"》
《div class="middle"》
        《div class="bt"》   
               《strong class="l"》《《/strong》
               《strong class="r"》》《/strong》
        《/div》
        《div class="gd"》
          《ul》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
          《/ul》
        《/div》
     《/div》
   《/div》
《/body》
《/html》

图片首尾相接左右循环滚动代码

《Center》
《table width="1024" border="0"》
《tr》
《td height="200"》《DIV id=demo style="OVERFLOW: hidden; WIDTH:1024px; HEIGHT: 200px"
align="center"》
《TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"》
《TBODY》
《TR》
《TD id=demo1 vAlign=top》
《table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"》
《tr》
《td width="250"》
《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《td width="250"》《img src="images/book/*****" width="150" height="200"》《/td》
《/table》 《/TD》
《TD id=demo2 vAlign=top》《/TD》《/TR》《/TBODY》
《/TABLE》
《/DIV》
《div align="center"》
《SCRIPT》
var speed=1
*****=*****
function Marquee(){
if(*****《=0)
demo.scrollLeft-=*****
else{
*****++
}
}
var MyMar=setInterval(Marquee,speed)
*****=function() {clearInterval(MyMar)}
*****=function() {MyMar=setInterval(Marquee,speed)}
《/SCRIPT》
《/div》
《/td》
《/tr》
《/table》
《/Center》

我做相册左右滚动效果要显示的大图片的样式CSS如下max-width: 612px;overflow:hidden IE里面显示了原大小

IE6不支持max-width，可以用
* html img{
width:expression(*****》500?”500”:width);
}
来实现。
注：1：expression在FF下不支持
2：*html内的width不要带单位（px）。
3：width:expression(*****》500?”500”:width);可同样换成width:expression(*****》500?”500”:auto);
4:若不是非常特别的需要用到expression，一般不建议使用expression，因为expression对浏览器资源要求比较高。

图片左右滚动代码

***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- *****《/title》
《/head》
《body》
《div id="colee" style="overflow:hidden;height:253px;width:410px;"》
《div id="colee1"》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
***隐藏网址***
《/div》
《div id="colee2"》《/div》
《/div》
《script》
var speed=30;
var colee2=*****("colee2");
var colee1=*****("colee1");
var colee=*****("colee");
*****=*****; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(*****《=0){
colee.scrollTop-=*****; //colee跳到最顶端
}else{
*****++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
*****=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
*****=function(){MyMar1=setInterval(Marquee1,speed)}
《/script》
《!--向上滚动代码结束--》
《br》
《!--下面是向下滚动代码--》
《div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"》
《div id="colee_bottom1"》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《p》《img src="/jscss/demoimg/200907/*****"》《/p》
《/div》
《div id="colee_bottom2"》《/div》
《/div》
《script》
var speed=30
var colee_bottom2=*****("colee_bottom2");
var colee_bottom1=*****("colee_bottom1");
var colee_bottom=*****("colee_bottom");
colee_*****=colee_*****
colee_*****=colee_*****
function Marquee2(){
if(colee_bottom1.offsetTop-colee_*****》=0)
colee_*****+=colee_*****
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_*****=function() {clearInterval(MyMar2)}
colee_*****=function() {MyMar2=setInterval(Marquee2,speed)}
《/script》
《!--向下滚动代码结束--》
《br》
《!--下面是向左滚动代码--》
《div id="colee_left" style="overflow:hidden;width:500px;"》
《table cellpadding="0" cellspacing="0" border="0"》
《tr》《td id="colee_left1" valign="top" align="center"》
《table cellpadding="2" cellspacing="0" border="0"》
《tr align="center"》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《/tr》
《/table》
《/td》
《td id="colee_left2" valign="top"》《/td》
《/tr》
《/table》
《/div》
《script》
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
var colee_left2=*****("colee_left2");
var colee_left1=*****("colee_left1");
var colee_left=*****("colee_left");
colee_*****=colee_*****
function Marquee3(){
if(colee_left2.offsetWidth-colee_*****《=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_*****//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_*****++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_*****=function() {clearInterval(MyMar3)}
colee_*****=function() {MyMar3=setInterval(Marquee3,speed)}
《/script》
《!--向左滚动代码结束--》
《br》
《!--下面是向右滚动代码--》
《div id="colee_right" style="overflow:hidden;width:500px;"》
《table cellpadding="0" cellspacing="0" border="0"》
《tr》《td id="colee_right1" valign="top" align="center"》
《table cellpadding="2" cellspacing="0" border="0"》
《tr align="center"》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《td》《p》《img src="/jscss/demoimg/200907/*****"》《/p》《/td》
《/tr》
《/table》
《/td》
《td id="colee_right2" valign="top"》《/td》
《/tr》
《/table》
《/div》
《script》
var speed=30//速度数值越大速度越慢
var colee_right2=*****("colee_right2");
var colee_right1=*****("colee_right1");
var colee_right=*****("colee_right");
colee_*****=colee_*****
function Marquee4(){
if(colee_*****《=0)
colee_*****+=colee_*****
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_*****=function() {clearInterval(MyMar4)}
colee_*****=function() {MyMar4=setInterval(Marquee4,speed)}
《/script》
《!--向右滚动代码结束--》
《/body》
《/html》
根据自己的需要 再改一下就可以了

css中怎样让内容或图片滚动

让图片和文字滚动以前是用《marquee》《/marquee》标签，不过现在已经很少人使用这个标签了，因为局限性太大！
现在一般都采用JS的方式或jquery具体的看你的具体需求才能使用相应的代码。

关于CSS图片滚动效果

banner *****_prev:hover { background-position:-200px -350px; }
设置的是banner上向左的按钮在鼠标经过时的背景图像的位置
-200px是x轴的坐标，-350px是y轴的坐标

你要修改的图片的大小，应该是修改.banner_pic ul li里的width:630px
这个参数修改好以后再适当修改
.banner_pic 里的width和height
.banner_pic ul 里的height
应该就能达到目的