html焦点轮播,完美实现js焦点轮播效果(一)

最简单轮播形式，js中通过pic的display属性控制变换，也可通过调整Pic的margin-Left

效果如图：

实现代码：

*{

margin: 0;

padding: 0;

list-style: none;

text-decoration: none;

}

.wrap{

width: 490px;

height: 170px;

margin: 100px auto;

border: 1px solid #000000;

position: relative;

overflow: hidden;

}

#pic{

width: 2450px;

height: 170px;

}

#pic li{

float: left;

}

#list{

position: absolute;

bottom: 10px;

left:150px ;

}

#list li{

float: left;

width: 15px;

height: 15px;

background: #fff;

margin: 0 10px;

border-radius: 50%;

cursor: pointer;

}

#list .on{

background: #e27a00;

}

.Prev{

top: 30px;

left: 0;

}

.Next{

top: 30px;

right: 0;

}

.Prev,.Next{

position: absolute;

font-size: 80px;

font-weight: bold;

color:#fff ;

-webkit-transition: all 0.35s ease-in-out

}

.Next:hover,

.Prev:hover{

background: #ccc;

background: rgba(204, 204, 204, 0.4);

}

.show{

display: block;

}

.hidden{

display: none;

}

window.οnlοad=function(){

var pic=document.getElementById('pic').getElementsByTagName('li');

var list=document.getElementById('list').getElementsByTagName('li');

var prev=document.getElementById('Prev');

var next=document.getElementById('Next');

var index=0;

var timer=null;

auto();

for(var i=0;i

list[i].index=i;

list[i].οnmοuseοver=function(){

clearInterval(timer);

Change(this.index);

}

list[i].οnmοuseοut=function(){

auto();

}

pic[i].οnmοuseοver=function(){

clearInterval(timer);

}

pic[i].οnmοuseοut=function(){

auto();

}

}

prev.οnclick=function(){

clearInterval(timer);

index--;

if(index<=0){

index=list.length-1;

}

Change(index);

}

next.οnclick=function(){

clearInterval(timer);

index++;

if(index>=list.length){

index=0;

}

Change(index);

}

prev.οnmοusemοve=function(){

clearInterval(timer);

}

prev.οnmοuseοut=function(){

auto();

}

next.οnmοuseοver=function(){

clearInterval(timer);

}

next.οnmοuseοut=function(){

auto();

}

function Change(curIndex){

for(var i=0;i

list[i].className="";

pic[i].className="hidden";

}

list[curIndex].className="on";

pic[curIndex].className="show";

index=curIndex;

}

function auto(){

timer=setInterval(function(){

index++;

if(index>=list.length){

index=0

}

Change(index);

},2000);

}

}

• 
• 
• 
• 
• 

<

>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。